모바일 UI·UX 디자인시 고려해야 할 가이드라인 3
애플 iOS HIG와 Material design 가이드를 중심으로
26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다.
라디오 버튼은 선택과 관련된 기능에서만 사용되어야 합니다. 라디오 버튼을 텝했을 경우 하나의 옵션만 선택 상태가 변경되고 그 외의 액션이 실행되지 않아야 합니다. 따라서 사용자가 옵션을 선택했을 때 화면의 상태가 바뀌는 액션 실행은 iOS의 세크멘트 컨트롤이나 텝tab 으로 디자인되어야 합니다.
라디오 버튼은 상호 배타적인 옵션선택에만 사용해야합니다. 라디오 버튼보다 텝이나 토글을 고려해보세요.27. 라디오 버튼 옵션 내에 또 다른 옵션을 넣지 않습니다.
라디오 버튼 항목 안에 다른 라디오 버튼이나 체크박스나 입력 필드 등 다른 옵션을 만들지 않아야 합니다. 모든 라디오 버튼 옵션은 선택과 관련된 하나의 레벨로 디자인되어야 합니다.
라디오 버튼의 하위에 라디오버튼 옵션을 노출하는건 기본적으로 권장하지 않습니다. 옵션을 켜거나 끌때는 스위치나 토글을 사용하세요.28. 링크 텍스트에 밑줄은 사용하지 않습니다.
모바일 앱의 경우 링크와 버튼은 구분하지 않고 버튼으로 표현합니다. 링크는 내비게이션을 버튼은 액션 실행으로 이해하고 디자인하면 됩니다.
링크 텍스트에 밑줄은 사용하지 않습니다. 링크를 내비게이션 개념으로 이해하시면 됩니다.29. 선택 옵션이 5개 이하일 경우 드롭다운보다는 옵션을 노출하게는 좋습니다.
드롭다운은 옵션의 개수가 많을 경우 화면의 공간을 줄여 주는 좋은 요소입니다. 일반적으로 7개 이상의 옵션일 경우 드롭다운 사용을 권장합니다.
소팅 옵션이 두개일 경우는 드롭다운이 오히려 사용성을 떨어뜨립니다. 모바일에서는 최대 5개이하는 옵션을 노출하세요.30. 탭 바의 항목은 최대 5개로 제한됩니다.
iOS에서 말하는 텝바(안드로이드 Bottom navigation)의 항목은 최대 5개로 제한됩니다.
텝바는 최대5개까지 제한됩니다. 만약 더많은 네비게이션이 필요하다면 [더보기]를 통해 부가적으로 접근하게 해줍니다.31. 경고창의 버튼은 테두리가 없는 텍스트 버튼 사용을 권장합니다.
테두리나 면으로 된 버튼은 랜딩페이지의 CTA버튼 같은 중요한 경우에만 사용할 것을 권장합니다. 그 외에 경고창 같은 화면에서는 텍스트 버튼 사용을 권장합니다.
다이얼로그의 버튼은 텍스트 버튼사용을 권장합니다.32. 테두리가 있거나 면으로 된 버튼보다는 테두리가 없는 텍스트 버튼을 기본으로 사용하세요.
테두리(베젤)를 사용해서 터치할 수 있다는 것을 표현하기보다는, 버튼 레이블을 의미 있는 단어로 지정하고 메인 컬러나 시스템 컬러를 사용해서 해당 요소가 인터랙션 가능하다는 것을 알립니다.
테두리가 없는 텍스트 버튼을 기본으로 사용하고 그중 가장 중요한 버튼을 강조하기 위해 테두리나 색을 채운 버튼을 사용하세요.33. 중요한 콜투 액션 버튼의 경우 사용자가 스크롤하더라도 지속적으로 볼 수 있어야 합니다.
콜 투 액션 버튼은 전환율과 직접적으로 연관성이 높습니다. 사용자가 페이지 내에 상세한 콘텐츠를 보다가도 필요할 때 사용 가능하게 화면 하단에 지속적으로 노출되어야 합니다.
상품상세 페이지에서 구매하기(장바구니담기/바로구매) 버튼은 콜 투 액션 버튼이라고 할 수 있습니다. 구매하기 버튼은 화면내에서 항상 노출되어 있어야 합니다.모바일 UI 디자인 시 고려해야 할 가이드 모음 1편 2편입니다.
https://brunch.co.kr/@chulhochoiucj0/8
https://brunch.co.kr/@chulhochoiucj0/9
https://brunch.co.kr/@chulhochoiucj0/12
https://brunch.co.kr/@chulhochoiucj0/14
https://brunch.co.kr/@chulhochoiucj0/20
참고
https://brunch.co.kr/@ebprux/92
https://design.axa.com/web-guidelines/buttons-and-links
