brunch

라이킷 댓글 30 공유 3.9k 브런치 글을 SNS에 공유해보세요
모바일 UX 기본가이드
By 최철호 . Oct 02. 2016

모바일 UI 디자인 시 고려해야 할 가이드라인 모음1

애플 iOS HIG와 구글 Material design가이드를 기준으로


1. 모바일에서는 모달 팝업 또는 대화창 상단 우측 “X”버튼은 노출하지 않습니다.

모바일에서 Alert 같은 모달 다이얼로그의 X버튼은 하단의 "예", "아니오" 버튼과 기능이 중복됩니다.
우측 상단의 [X]버튼은 데스크탑 윈도우 OS의 UI기준입니다. 모바일은 데스크탑과 UI기준이 다른 측면이 많습니다.

2. 풀프레임 대화창(Dialog)에  “X”버튼 (닫기 버튼)은 왼쪽 상단을 권장합니다.

모바일에서 사용자의 입력을 요구하는 대화창(dialog)에서는 우측 상단에“X”버튼(닫기 버튼)은 우측에 놓지 않고 좌측울 권장합니다.
대화창에서 “X”버튼은 좌측에 위치시키고 완료(저장) 버튼은 상단 우측에 놓는 것을 권장하는 것은 입력을 완료하고 키보드를 내리고 완료 버튼을 텝하는 단계를 축소하기 위함입니다.

3. 긍정적인 액션 버튼은 우측에 배치합니다.

모바일에서 다이얼로그 또는 Alert 화면에서 긍정적인 액션은 화면의 오른쪽에 위치시켜는 것을 원칙으로 합니다.

부정적인 액션버튼(취소)는 항상 긍정적 인 액션버튼의 바로 왼쪽에 배치됩니다. 모바일에서 “확인”과 같은 긍정적인 액션버튼은 계속 진행 개념으로 우측에 배치해야 합니다.

4. 입력을 완료하지 않은 상태에서 완료 버튼(보내기/로그인)은 오류를 방지하기 위해서 비 활성화를 권장합니다.

메일 내용 작성 중에 Navigation Bars의  “보내기”버튼은 비활성화되어 있어야 합니다. 비활성화 상태에서는 사용자의 탭에도 반응을 하지 않습니다. 메일의 보내기같은 확인 액션은 다이얼로그에서 모든 필수 필드를 입력할 때까지 비활성화됩니다.

메일 내용작성을 완료하지 않은 상태에서는 Navigation Bars에 “보내기”버튼은 활성화 시키지 않아야 합니다.
로그인 정보 입력을 완료하지 않은 상태에서는 “로그인” 버튼은 활성화 시키지 않는 것이 좋습니다.



5. 모바일에서는 입력 내용에 맞는 키보드를 제공해야 합니다.

숫자입력필드에 일반키보드를 보여주어 유저는 숫자를 입력하기 위해 숫자키보드 변환버튼을 탭하는 불편함을 주기보다 숫자입력하는 필드에는 자동적으로 숫자 키보드를 제공해야 합니다.
검색필드에서는 일반 키보드가 아닌  “검색”버튼이 있는 검색용 키보드를 제공해야합니다.
이메일 입력 필드에는 일반 텍스트 키보드가 아니라 '@'가 있는  이메일 키보드를 제공해야합니다.

6. 검색 필드 우측에 검색 버튼은 추천하지 않습니다.

검색바에서도 검색필드 우측에 검색버튼은 ios와 안드로이드에서 추천하지 않습니다. 검색어 입력후 키보드의 검색 버튼을 탭하는 것이 사용성이 더 높습니다.
검색필드가 네비게이션바 하단에 위치해도 검색 필드 우측에 검색버튼은 추천하지 않습니다.

7. 스크롤을 고려하여 콘텐츠의 그리드를 화면 하단에 정확하게 정렬하지 마십시오.

화면에 컨텐츠가 넘치게 정렬하여 사용자에게 스크롤이 가능하다는 시각적인 힌트를 제공합니다.
메인화면에서 사용자가 스크롤해서 더 많은 컨텐츠를 보도록 유도하기 위해 시각적인 힌트를 제공해야합니다.
화면에 상품리스트를 넘치게 정렬하여 사용자에게 더 많은 상품이 있다는 시각적인 힌트를 제공합니다.

8. 텝은 중첩되지 않아야 합니다.

텝은 2단으로 중첩되게 하기 보다는 항목을 줄이거나(최대5개)  좌우스크롤을 권장합니다.

9. 버튼 스타일은 중요도에 맞게 사용해야 합니다.

로그인이 화면의 가장 중요한 버튼입니다. [회원가입]은 로그인과 같은 형태로 디자인하면 안됩니다.  한 화면에서 다른 기능을 가진 버튼을 동일하게 디자인 하지 마십시요.
터치가 가능한 버튼과 링크에 사용된 컬러를 다른 정보에도 사용하지 마십시요.



10. 시각적 노이즈는 최소화해야 합니다.

컨텐츠 내 보더라인은 최소화해야 합니다. 기능적으로 불필요한 요소와 시각적으로 산만한 요소를 제거하십시요.
격자형 보더라인은 가급적 사용하지 않는걸 추천합니다.
그룹의 하위항목에서 그룹간 구분 라인(Divider)은 사용하지 않는게 좋습니다.



11. 내비게이션 바(앱바)에서 아이콘과 텍스트 레이블을 함께 사용하지 마십시오.

네비게이션바에 햄버거 아이콘 아래 [menu] 텍스트 레이블은 사용을 권장 하지 않습니다.  사용성이 문제라면 텍스트 레이블만 사용해야합니다.  아이콘만 사용할 것을 권정합니다.
Tab Bar 또한 아이콘과 레이블사용이 기본입니다. 아이콘만 사용할 경우는 iOS에서는  Tool Bar로 정의하고 있습니다.


로고와 장바구니 아이콘이 있는 바의 명칭을 iOS에서는 Navigation Bars로 안드로이드에서는 Appbar로 쓰고 있습니다. 이글에서는 Navigation Bars로 사용합니다.



12. 키보드를 통해 많은 정보를 입력해야 하는 화면에서 [완료]를 의미하는 버튼은 상단 내비게이션 바 우측을 권장합니다.

입력을 위해 키보드가 노출 될 경우 하단에 [완료]를 의미하는 버튼은 키보드에 가려지게 됩니다. 키보드를 고려하여 내비게이션 바 우측에 [완료]를 버튼을 위치시키는 걸 권장합니다.

하단의 [취소],[작성하기] 버튼은 모바일에서는 우측같이 키보드가 노출되면 가려지게 됩니다. 사용자는 작성을 완료하기 위해서는 키보드를 닫아야 합니다.
모바일에서는 키보드를 고려해서 디자인 해야합니다.키보드를 닫지 않고도 완료할 수 있어야 합니다.
인스타그램은 최근 공유하기 버튼을 네비게이션바 상단으로 이동시켜 사용성을 개선했습니다.



2편으로 이어집니다.

https://brunch.co.kr/@chulhochoiucj0/9

https://brunch.co.kr/@chulhochoiucj0/10

https://brunch.co.kr/@chulhochoiucj0/12






참고 사이트

https://developer.apple.com/ios/human-interface-guidelines

https://material.google.com

https://think360studio.com/how-to-design-input-data-field-to-improve-mobile-app-ux

http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/


keyword
magazine 모바일 UX 기본가이드
GS SHOP에서 커머스 UI/UX 디자인을 하고 있습니다.
http://gsrealdesign.tistory.com
www.instagram.com/cchbarl
댓글

    매거진 선택

    키워드 선택 0 / 3 0
    브런치는 최신 브라우저에서 최적화 되어있습니다. IE chrome safari