어어 블로그 오랜만.....본격적으로 실무 들어가면서 일상 속에서 순간순간 떠오르는 디자인 영감들이나 공부하면서 새로 배운 부분, 알고 있었지만 잊어버리기 쉬운 부분들을 따로 정리해두면 좋겠다 싶어서 이전에 만들어둔 블로그를 메모장처럼 활용해보면 좋을 듯 했다. 말그대로 메모장 용도라 흐름과 내용이 굉장히 두서없을 예정ㅎㅎ
아 그리고 또다른 목적은 구글 애널리틱스 배워보면서 사용자 데이터 개념 비슷하게 방문자 데이터를 분석할 페이지가 필요해 이 블로그에 작성하는 것임. 애널리틱스 쉬운듯 어려운듯 쉬운건가? 사실 지금 당장 필요한건 아닌데 공부해두면 언젠간 쓸데가 있겠지?
우선 이번 게시물은 IOS의 휴먼 인터페이스 가이드랑 구글의 머테리얼 가이드라인 흝어보다가 브런치스토리에 잘 정리해둔 게시물이 있어서 나한테 필요한 부분을 정리해둘까 한다. 내용 자체는 참 좋은데 이게 2016년에 작성된 내용이다보니 현재는 너무 당연해진 부분들도 많다. 지금도 통용되고 있는 기본 중의 기본 정도, 그 중에서도 종종 잊어버릴 수 있는 부분만 찾아서 정리하면 될 듯. 이 게시물은 5가지로 나눠서 가이드를 정리해뒀는데 나는 필요한 부분만 정리할 예정이라 아마 3번 정도에 걸쳐 업로드할 것 같다.
(최철호님의 Brunch글 참조 https://brunch.co.kr/@chulhochoiucj0/8)
모바일 UXUI 디자인 시 고려해야 할 기본 가이드라인 1
1. 입력 내용에 맞는 키보드 제공하기
모바일 환경에서는 키보드가 화면의 반 이상을 차지하기 때문에 입력 내용별로 그에 맞는 필드를 제공하는 것이 중요함.
예를 들어 전화번호, 계좌번호 등 숫자를 입력하는 필드에는 숫자키보드를, 검색어를 입력하는 검색필드에는 일반 키보드가 아닌 '검색' 버튼이 있는 검색용 키보드를, 이메일 입력 필드에는 일반 텍스트 키보드가 아닌 '@'가 있는 이메일 키보드 제공.
사실 모든 어플이 이런식으로 세세하게 키보드 필드를 나눠서 제공하진 않는다. 다만 이런 디테일을 추가한다면 맞는 정보를 입력하기위해 다른 키보드 필드로 전환하는 시간을 줄여준다는 점에서 더 긍정적인 사용자 경험을 이끌어 낼 수 있다고 생각한다.
2. 콘텐츠의 그리드를 스크롤에 맞춰 화면 하단에 정확하게 정렬하지 않기
사용자는 눈에 띄는 특정한 요인이 없는 이상 스크롤을 하지 않고 곧바로 네비게이션 아이콘을 탭하는 경우가 많다. 따라서 하단으로 스크롤하면 더 많은 콘텐츠를 확인할 수 있다는 것을 보여주는 시각적인 단서가 중요하다. 즉 콘텐츠의 그리드를 화면 하단에 정확히 맞추기보단 넘치게 정렬해 하단 콘텐츠의 일부를 노출시켜 추가적인 콘텐츠가 있다는 시각적인 단서를 제공해야한다. 이는 상하 스크롤뿐만 아니라 좌우 스파이프에도 똑같이 적용할 수 있다. 굳이 깔끔하게 그리드를 맞춰서 정렬할 필요가 없다는 거!
3. 사용자 행동에 대한 실시간 피드백
모바일 환경에서는 사용자가 즉각적으로 다음 행동으로 유도할 수 있어야한다. 따라서 다음 단계로 이동하기 위한 사용자 행동이 양식에 맞지 않을 경우, 즉각적으로 수정할 수 있게 피드백을 제공하거나 성공적으로 행동을 완수했을 때 완료 안내를 시각적으로 보여주면 긍정적인 사용자 경험을 이끌어낼 수 있다. 조금 더 ux적인 면으로 들어가보자면 서비스 내에서 사용자가 목표했거나, 서비스 자체의 목표를 달성했을 때 화려한 시각적 장치로 칭찬해주는 방법도 좋다. 목표를 이뤘다는 보상심리와 성취감을 배로 느끼게해 최고의 사용자 경험을 제공해줄 수 있다. 이 부분은 나중에 추가로 다뤄보면 좋을 듯 하다.
4. 옵션 선택을 완료하기 전까진 Disable 버튼 사용하기
시스템적인 문제나 그 외적인 문제로 인해 옵션을 드롭다운으로 해야한다면, 옵션 선택이 완료되지 않은 상태에서 페이지 내 CTA버튼(구매하기, 완료하기 등)은 활성화하지말고 disable 버튼을 활용해 사용자에게 행동이 완료되지 않았음을 인지시켜주면 좋음. 옵션 선택을 완료하지 않은 채 다음 단계로 넘어갔을 때 실수를 인지하고 단계를 반복하는 것을 방지하고 행동의 흐름을 단절시키지 않기 위함.
5. 콘텐츠 페이지는 콘텐츠 부각시키기
네비게이션 요소들은 사용자가 콘텐츠를 더 쉽고 편리하게 탐색하고 상호작용할 수 있게 도와주는 수단일 뿐 절대로 메인이되면 안된다. 사실 네비게이션바나 UI들은 굳이 찾으려고하지 않아도 형태가 이질적이라 눈에 쉽게 보인다. 사용자에게 콘텐츠를 노출시켜야할 페이지는 네비게이션 요소를 통합하거나 하위페이지로 구분해 사용자가 콘텐츠에 집중할 수 있게해야한다.