Swifter {Swift Developer}

메뉴

모바일앱의 UX를 개선할 때 알아야할 몇가지

사용자에게 거부감이나 스트레스없이 더 나은 사용자 경험을 제공하기 위한 세밀한 UI디자인을 고려해야 한다.

1.화면을 스와이프로 뒤로가기를 구현한다.
최근 갤럭시 노트나 아이폰6+ Plus등의 대형 화면 스마트폰이 늘어나는 추세이다. 이런 대형 화면의 스마트폰에서는 한손 조작시, 화면 상단에 있는 버튼이 닿지 않는 경우가 많다. 특히 iOS의 경우 물리적인 뒤로가기 버튼이 없기 때문에 버튼위치를 아래로 배치하거나 화면을 스와이프로 뒤로 가기 기능을 구현해야 한다.
다만, 사용자경험상 스와이프해서 화면을 뒤로 돌리는 기능은 사용자가 잘 알 수 없는 기능이기 때문에 처음 사용할 경우 도움말 팁을 추가하여 해당 기능이 있다는 사실을 알려준다.
iOS에서 구현시 SloppySwiper라는 라이브러리를 주로 사용한다.

2.다음 입력양식에 자동으로 포커스를 둔다.
사용자 로그인 화면과 같은 입력양식이 있는 화면에서는 이메일주소와 비밀번호 입력등의 여러 단계가 있는 입력양식을 구현할 경우가 많다. 이런 경우 소프트웨어 키보드에서 엔터(줄바꿈)을 누르면 다음 입력양식으로 이동하면 사용자 입력이 편해진다. 또한 마지막 입력까지 마무리하고 엔터를 입력하면 다음 단계로 진행되도록 한다.

3.비밀번호가 틀릴 경우, 언제 바꾸었는지를 주지시켜주자.
오랜 기간 같은 행동을 하면 습관이 된다. 즉, 사용자가 로그인시 비밀번호를 입력하는 것이 계속되면 습관화 된다. 그렇지만, 사용자가 비밀번호를 변경하면 예기치 않은 로그인 오류가 된다. 이는 사용자가 이전 암호를 입력하는 것에 익숙해져 암호를 변경한 것을 잊어버린 것이다. 이 떄 단순한 오류 메시지를 보여주면 사용자가 비밀번호를 잘못입력했다고 생각하게 된다. 이것은 사용자의 불만과 혼란을 초래한다. 이 때 새 비밀번호를 입력할 수 있는 습관이 되지 않았다는 상기하고 사용자가 필요로 하고 있는 것은 최근 자신이 비밀번호를 변경한 것에 생각나게 하는 것이다. 사용자에게 오류 메시지를 보여주면서 얼마전에 비밀번호를 변경했는지를 알려주자. 이를 통해 사용자는 왜 이전 비밀번호로 로그인이 잘못되었는지를 알게 된다. 이 알림은 사용자가 이전 비밀번호를 입력한 경우에만 표시해야 한다. 즉, 사용자가 이전 비밀번호를 입력할 떄 이를 감지할 수 있도록 이전 비밀번호의 해시값을 저장해야 한다.
오류를 알림으로 변경하여 사용자가 새 비밀번호를 입력하는 습관을 만들어주자.

4.정보가 없다는 것을 알려주자.
앱을 처음 설치하고 실행해보면, 보여줄 컨텐츠가 없는 경우가 많다. 이 때 사용자가에게 아무것도 없는 상태임을 알려주자. 또한, 아무것도 없는 상태를 해결하기 위해 어떻게 하면 좋을지를 알려주면 더 좋다.

5.버튼 탭 영역은 44×44 포인트 이상으로 구성하자.

잘못된 영역을 사용자가 선택하지 않도록 하기 위해 탭 영역을 44×44포인트 이상으로 구성하자. 물론 버튼 영역은 반드기 이 크기 이상일 필요가 없다. 44라는 수치는 Apple iOS Human Interface Guideline에서 권장하고 있는 크기이다.

6.오류가 발생되면 문제해결 방법도 표시한다.
예로 네트워크 연결 오류가 발생했다면, “네트워크를 연결할 수 없습니다”라고 표시만 하지말고 “네트워크에 연결할 수 없습니다. Wi-FI설정을 확인후 다시 시도하십시오”라는 등의 오류 해결방법도 표시해주자.

7.스크롤할 경우, 끝부분에 요소 일부를 보여주자.
처음 실행된 화면에 무조건 내용을 딱 맞게 넣는 것이 아니라, 스크롤할 수 있는 요소가 스크롤하는 방향 끝에 나오도록 하여 사용자가 스크롤할 수 있다는 여지를 보여주자.

8. 버튼 피드백을 바로 리턴하자.
사용자가 버튼을 누르면 무엇인가 피드백을 바로 리턴하도록 하자. 이 말은 서버와 통신하다고 해도 가능한 피드백을 바로 리턴하는 것이 사용자에게 스트레스를 적게 준다. 트위터의 경우 ‘좋아요’버튼을 눌로도 서버응답과 상관없이 바로 피드백을 주는 UI를 가지고 있다.

9. 버튼은 꼭 라벨링을 하자
어떤 상품을 담아두는 위시리스트나 검색에서 자주 사용하는 돋보기등은 아이콘으로 사용되고 있지만, 모든 사람들이 이해할 수 있는 아이콘이라고 할 수 없다. 특히 가장 이슈가 되는 것은 메뉴에 자주 사용되는 햄버거 아이콘이다. 최근에는 더 다양한 앱에서 사용되고 있지만, 사용자가 그 아이콘을 버튼으로 인식할 수 없는 경우도 있다. 그런 경우에는 메뉴들의 라벨을 추가하면 좋다.
또는 아이콘을 사각형으로 둘러싸서 버튼같은 느낌을 가지게 하는 것도 사용자 경험을 높일 수 있다. 즉, 버튼 UI를 생각하면 예상되는 사용자 상태를 고려해서 설계하는 것이 중요하다.

10. 테이블 뷰셀은 이전까지 하이라이트해 놓는다.
뉴스 앱등에서 상세화면 전환시 테이블뷰(목록보기)에서 바꾸는 UI가 많다. 탭으로 구분시 셀을 하이라이트시키고 있지만 손가락을 놓으면 하이라이트를 해제시키는 것이 아니라, 상세화면에서 다시 테이블뷰로 가더라도 셀 하이라이트를 해제하는 것이 사용자가 어떤 셀을 눌렀는지 알게하는게 직관적이다.

11. 로딩중에 진행상태를 표시하자.
로딩중에 빈 상태를 보여주는게 아니라, 로딩 표시나 진행상태를 표시해주자. 당연하지만, 로딩을 표시하여 앱이 중단된 것이 아니라 실행중이었다는 것을 나타내어 사용자에게 안정감을 주자.
단, 로딩 표시를 남발하면 사용자에게 스트레스를 줄 수 있다. 또는 로딩중에 개체 모양만 표시하는 방법도 있다. 최근에는 이런 UI를 Facebook과 Slack에서 도입하고 있다.

Facebook Comments

카테고리:   잡담

Tags:  ,

댓글

죄송하지만 댓글은 닫혀 있습니다.