지난 시간에 이어
UI/UX에 대한 모바일 가이드라인을 정리해 보려구 한다.
회원 가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요.
입력한 비밀번호는 기본적으로 (....) 형태로 가려져 있어야 한다. 모바일에서는 작은 키보드로 인해 오타가 빈번히 발생하니 입력한 비밀번호를 볼 수 있는 옵션을 토글 형태로 제공해준다.
서로 관련성 있는 요소는 가깝게 배치하기, 근접한 개체들은 동일한 개체로 인식된다.
근접성의 원칙은 사람듬들은 가까이 있는 요소끼리는 하나로 묶이는 경향이 있다는 원칙
디자인시 근접성을 적용하면 가독성을 높인다.
사용자가 입력하는 내용이 형식에 맞을 경우 실시간 피드백 해주기
텍스트 필드에 사용자가 입력하는 내용이 형식에 맞을 경우 실시간 데이터 확인을 통해 적절한 실시간 피드백을 제공해야 한다.
사용자의 입력 오류를 줄여주고 다이얼로그의 양식 form 입력을 완료할 가능성을 높인다.
사용자가 입력 완료 후 경고창으로 에러 메시지를 노출 하는 것은 지양할 것
버튼에 사용한 스타일을 다른 요소(섹션 제목)에 사용하지 마세요
CAT은 사용자에게 어떤 행위를 권하거나 유도하는 도구 또는 기법을 만한다.
전환율을 높이는데 중요한 역할을 하는데, 여기서는 전환을 유도하는 버튼과 버튼 레이블을 의미함
수량 선택기능은 오류 방지를 위해 드롭다운보다 스텝퍼 사용을 권장
텍스트 필드에 입력 한 텍스트를 모두 지울 수 있는 Claear button은 필수적으로 제공
모바일에선 텍스트를 입력하는 것만큼 지우는 것도 어렵기 때문에 Clear button을 제공해야함
라디오 버튼의 디자인을 조금 더 사용성이 높은 디자인으로 전용해보기
라디오 버튼은 두 가지 이상의 옵션 중 하나만 선택 가능,
사용자가 옵션을 선택해야 하는 인터페이스를 디자인 할 경우 반드시 라디오 버튼 형태로 디자인할 필요는 없다.
예) 
옵션 선택을 완료하지 않은 상태에서 오류를 방지하기 위해 완료 버튼은 비 활성화를 권장
만약 시스템적인 문제나 그 외 적인 문제로 인해 옵션을 드롭다운으로 해야만 한다면 옵션을 선택하지 않은 상태에서 완료버튼을 활성화 시키지 않아야 한다.
이는 사용자가 탭한 후 오류 메시지를 노출하여 행동의 흐름을 단절 시키지 않기 위함이다.
예, 아니오 같이 두 개의 옵션만 있는 경우 하나의 체크박스 또는 토글 스위치를 사용
예를 들어 동의함 라디오 버튼과 동의안함 라디오 버튼을 각각 사용하는 대신 동의함 체크박스를 사용
키보드에 중요한 액션 버튼이 가리지 않아야 한다.
풀 스크린에서 로그인등 입력 필드 하단에 확인 버튼이 있는 경우 키보드에 버튼이 가려지지 않아야함
키보드가 있는 상태에서 완료가 가능해야 한다.
사용자가 정보를 입력 완료하고 키보드를 내린 후 확인 버튼을 탭하지 않아야 한다.
만약 입력 필드가 많아 완료버튼이 가려진다면 우측 상단에 배치하는 것도 고려해 볼만하다.
모바일에서는 한 화면에 한가지 행동만 집중하게 디자인 해야한다.
한 화면에 지나치게 많은 정보를 요청하지 않고 단계를 나눠 요청한다.
모바일의 가장 큰 특성 중 하나는 작은 화면, 작은 화면에 사용자에게 한꺼번에 많은 정보를 입력하도록 요청한다면, 쉽게 입력을 포기하거나 부담을 느껴 입력을 망설인다.
복잡한 프로세스를 한 페이지에 모두 디자인하지 않고 여러개의 작은 조각으로 나누워 단계별로 배치해서 디자인해야 사용자의 인지부하를 감소시키고, 페이지 속도가 빨라지고, 오류처리가 쉬워진다.
모바일에서 좌우 슬라이드 되는 콘텐츠는 가로 그리드에 딱 맞출 필요 없다.
모바일 화면의 창에 모달을 표시하는 대신 모달 시트를 사용하기
데스크톱 화면에서는 레이아웃에 문제가 없지만 모바일에서는 화면의 크기가 작아 콘텐츠를 표시할 영역이 작아지고 버튼을 터치하기가 더 어려워짐
화면 중앙에 고정되어 있기 때문에 한 손으로 휴대폰을 잡을 때 사용자의 엄지 손가락이 버튼에 쉽게 닿지 않는다
모달 시트는 화면 하단에서 슬라이드 되어 나타나고 화면의 전체 영역에 콘텐츠와 컨트롤을 레이아웃 할 수 있다.
라디오 버튼은 소팅기능에 사용 불가
라디오 버튼은 선택과 관련된 기능에서만 사용 되어야 함.
라디오 버튼을 탭 했을 경우 하나의 옵션만 선택 상태가 변경되고 그 외의 액션이 실행되지 않아야 한다.
따라서 사용자가 옵션을 선택했을 때 화면의 상태가 바뀌는 액션 실행은 ios의 세크멘트 컨트롤이나 탭으로 디자인 되어야한다.
라디오 버튼 옵션 내에 또 다른 옵션을 넣지 않기
라디오 버튼 항목안에 다른 라디오 버튼이나 체크박스, 입력필드 등 다른 옵션을 만들지 않아야 함
모든 라디오 버튼 옵션은 선택과 관련된 하나의 레벨로 디자인 되어야 한다.
링크 텍스트에 밑줄은 사용하지 않는다
모바일 앱의 경우 링크와 버튼을 구분하지 않고 버튼으로 표현함,
링크는 내비게이션을 버튼 액션 실행으로 이해하고 디자인하면 된다.
선택 옵션이 5개 이하일 경우 드롭다운 보다는 옵션을 노출하는게 좋다
드롭다운은 옵션의 개수가 많을 경우 화면의 공간을 줄여 주는 요소
일반적으로 7개 이상의 옵션일 경우 드롭다운 사용을 권장함
바텀 네비의 항목은 최대 5개
더 많은 네비게이션이 필요하다면 [더보기]를 통해 부가적으로 접근하게 하기
경고창의 버튼은 테두리가 없는 텍스트 버튼 사용을 권장
테두리나 면으로 되 버튼은 랜딩페이지의 CTA 버튼 같은 중요한 경우에만 사용할 것을 권장함.
그 외 경고창 같은 화면에서는 텍스트 버튼 사용을 권장
테두리가 있거나 면으로 된 버튼보다는 테두리가 없는 텍스트 버튼을 기본으로 사용하기
테두리를 사용해서 터치할 수 있다는 것을 표현하기 보단, 버튼 레이블을 의미 있는 단어로 지정하고 메인 컬러나 시스템 컬러를 사용해서 해당 요소가 인터랙션 가능하다는 것을 알리기
중요한 콜투 액션 버튼의 경우 사용자가 스크롤 하더라도 지속적으로 볼 수 있어야 한다.
콜 투 액션 버튼은 전환율과 직접적으로 연관성이 높다.
사용자가 페이지 내에서 상세한 콘텐츠를 보다가도 필요할 때 사용 가능하게 화면 하단에 지속적으로 노출되어야 한다.
https://brunch.co.kr/@chulhochoiucj0/9 이전에 참고한 블로그를 또 참고했다.
알아야할게 너무 많은거 같아,,
