[UI/UX / Design Reference] 뛰어난 UI를 구현하기 위해 확인해야 할 52가지 점검표

출처 : http://blog.naver.com/olivestone12/220143401358

" 기능이 아닌 장점을 홍보해라 "

디자인을 하다보면, 나중에 여기가 좋았는데라고 생각하는 경우가 있습니다. 그런   개선하고 싶은 부분은 항상 초기에는 발견되기 어렵습니다.  이번에는 Good UI를 설명한 곳이 있어 번역해보았습니다.

1. 멀티컬럼이 아닌 하나의 컬럼 레이아웃으로

열이 여러개 있는 경우, 사용자  시선이 좌우로 흩어지기 때문입니다.

2. 우선 무료로  제공하자

선물은 사용자를 만족시킬뿐 아니라, 이후 구매로 이어지는 효과적인 수단이 되기 때문입니다.

3. 비슷한 기능은 하나로 묶는다

사용자에게 사용의 용이성을 중요시 합니다.

4. 고객의 소리를 싣는다.

제공하는 서비스의 신뢰도를 높이고, 사용하는 사용자가 증가하기 때문입니다

5. 사용자가 했으면 좋겠다는 것을  반복한다

사용자 시 선을 최적화하기 위해 반복함으로 무엇을 위한 사이트인지 인지 시킵니다.

6. 클릭할 수 있는 부분과 클릭된 부분을 명확하게 구분한다

사용자가 지금 무엇을 보고 있는지 앞으로 무엇을 볼 것인지를 파악하는데 도움을 줍니다.

7. 모든 선택을  고르게 하는게 아니라 추천을 강하게 전달한다

서비스에 대한 자세한 내용을 알고 추천해주는 것으로 사용자가 선택이 쉬워지고 구매  비율도 높아지기 때문입니다.

8. 확인화면을 끼우는 것이 아니라, 다시 기능을 제공한다.

확인화면이 아니라 다시 기능을 제공하는 것은 사용자에게 자유로 느낌을 주기 위해서 입니다.

9. 누구를 위한 서비스인지를 다시 전한다

모두를 위해서라고 말하는 것보다는 당신을 위해라고 말하는 것이 더 신뢰를 얻을 수 있습니다.

10. 의문형이 아니라, 단언형으로 전달해라

의문형은 믿음을 주지 못하느 느낌을 주기 때문에 버려야 합니다.

11. 대비를 증가한다

Call to Action 등 사용자 동작을 촉진을 돋보일 수 있수록 좋습니다.

12. 어디에서 만들어진 것인지를 명확하게 한다

어디에서 만들어졌는지를 밝히는 것으로 사용자에게 안정감을 줍니다.

13. 입력양식 항목을 줄여라

입력폼이 길고 기입하는 것이 많으면 의욕을 잃어버리기 때문에 가능한 줄여야  합니다.

14. 선택은 처음부터 표시하는 것이 좋다

클릭하여 선택을 표시하는 디자인은 심플해 보일 수 있지만 사용자는 한번 클릭 만큼 불필요하게 행동하지 않으면 안되기 때문에 이탈율이 높아질 가능성이 있습니다.

15. 컨텐츠가 계속되고 있음을 명시해라

일정 간격으로 컨텐츠를 포함하여 읽기 편하도록 합니다.

16. 불필요한 링크는 하지 않는다

사용자가 다른 곳으로 이동하는 것을 방지합니다.

17. 사용자 자신의 상태를 알 수 있도록 한다

자신이 지금 어떤 상태인지를 알 수 있도록 하여 안정감으로 연결합니다.

18. 사용자가 무엇을 할 수 있게 되었는지를 알리는 문구를 사용한다

무엇을 할 수 있게 되었는지를 연상시키는 것이 중요합니다.

19. 무엇을 하면 어디가 변경할 수 있는지를 명확하게 한다

무엇이 일어날지 모르는 상황은 사용자에게 스트레스를 주게 되어 버립니다.

20. 등록폼을 컨텐츠와 동일한 페이지에 넣는다

다른 페이지로 이동하는 것은 시간밖에 없기 때문입니다.

21. 애니메이션 전환을 도입한다

애니메이션을 추가하는 것으로 시선을 모을 수 있습니다.

22.  등록 전에 서비스를 체험하게 한다

서비스 일부를 체험하게 하여 사용자에게 서비스의 장점을 전합니다.

23. 테두리를 줄인다

테두리가 너무 많으면 어디를 보고 해야할지  분명하지 않기 때문입니다.

24. 기능이 아니라 장점을 홍보해라

기능 설명도 중요하지만 사용자는 어떤 경험을 얻을 수 있는가?에 관심이 있다는 것을 잊어선  안됩니다.

25. 서비스의 첫 사용자를 생각해라

서비스를 이용하기 시작할 때 데이터도 0, 친구도 0인 상태에서 어떻게 이용하라는 것이 중요합니다.

26. 처음부터 양해 버튼에 체크해두어라

사용자에게 의사를 확인하는 것도 중요하지만, 때로는 억지로 제공하는 것도 중요합니다.

27. 통일성을 두어라

전체가  통일되어 있으면 사용자에게 불필요한 학습비용을 지불할 필요가 없고 번거로움을 방지할 수 있습니다.

28. 미리 입력되어 있는 내용은 기입해 두어라

대상 사용자가 알고 있는 경우,  알고 있는 부분은 입력해 두는 것이 사용자가 느끼는 귀차니즘을 줄일 수 있습니다.

29. 대표적인 UI을 채용해라

버튼 좌우등 당연시 하는 인터페이스를 채용하여 사용자 실수를 예방합니다. 반대로 바라지 않는 행동은 굳이 일반적인 UI와 반대로도 활용도를 낮출 수 있습니다.

30. 하지 않는 것으로 인한 단점을 강조한다

심리학에서 손실회피성이라는 말이 있듯이, 사람은 얻을 수 있는 이익보다 잃는 것이 더 크게 봅니다. 그렇기 때문에 장점ㅂㅗ다는 하지 않는 단점을 강조합시다.

31. 디자인에서 계층 구조로 표현하자

사용자에게 어디서 무엇을 하는 것을 목적으로 하는 페이지인지를 전달할 때 고려합니다.

32. 관련 항목을 정리해라

사용자가 일일이 항목을 찾을 필요가 없도록 하기 위함입니다.

33. 미입력이나 잘못된 입력을 그 자리에서 지적한다

기입한 후  등록버튼을 누른 후에 오류를 보여주는 것보다 기입중에 지적하는 것이 사용자를 위해 더 편리합니다.

34. 여러 데이터양식을 지원해라

한글, 일본어등 모든 것을 대응하여 사용성을 향상시킵니다.

35. 시간이 없음을 강조한다

사람은 직전까지 결정하지 않을 수 있어 최대한 강조해야 합니다.

36. 재고가 남은 것은  별 문제안된다고 강조해야 한다

시간이 없다는 것을 강조하는 것처럼 판단력을 높이기 위해 신청하지 않으면 아깝다는 어필하기 위해서입니다.

37. 대안을 준비한다

처음부터 작성하는 것보다 선택이 더 명확하게 기입할  때보다 노력이 적게 듭니다. 설문의 경우에도 유도되지 않도록 주의 해야 합니다.

38. 클릭 가능한 영역을 늘린다

특히 스마트폰을 고려하면, 너무  좁은 클릭영역은 누를 수 없을 정도로 불편하면 이탈할 가능성이 높습니다. 동시에 클릭영역끼리의 간격도 충분히 고려해야 합니다.

39. 로딩은 빨라야 한다

사이트 표시가 2초 느린것만으로 이탈율은 50% 높아진다는 사례도 있듯이 지연시간을 줄이는 방법을 궁리하는 것이 좋습니다.

40. 키보드 단축키를 설정하자

예로 다음 항목에 초점을 맞추려면 J를 이전항목으로 포커스를 하는 경우 K와 같은 바로가기 있으면 내용을 읽는 것이 쉬워집니다. 중요한 것은 얼마나 적은 동작으로 사용자가 목적을 달성하게 할 것이라는 관점이 중요합니다.

41. 이득이  얼마인지 보여준다

사람은 처음 본 숫자에 대한 판단을 하기 위해 실제 가격과  인하된 이전 가격등을 강조해서 보여주는 것이 좋습니다.

42. 마지막이 가까워졌다는 것을 잘 표기한다

가입후 10개 항목의  행동목록이 있으면 종료항목을 “0/10″이라고 표시하는 것이 아니라, “2/12:처럼 목표에 접근했다고 표기합니다. 사용자의 동기유지를 위해서 입니다.

43. 모든 내용을 표시해 두는 것이 아니라 순차적으로 표시해 나간다

특히 입력폼에서 유효한 이전 항목을 기입하면 다음 항목이 나오는  형태를 말합니다. 항목이 너무나 많은 전부를 보여주는 것이 아니라 조금씩 보여줘서 퍼스트뷰의 불편함을 해소하기 위해서입니다.

44. 사용자 진입 장벽을 낮게 한다

처음부터 높은 장벽을 내걸면, 사용자는 참여하는데 주저하게 됩니다. 무엇인가를 시작하는 것 자체가 사용자를 많이 있다는 인식하게 합니다.

45. 팝업은 신중하게 고려해라

팝업은 사용자의 의사에 관계없이 강제적으로 나옵니다. 사용자는 자신이 필요한 정보를 보여줄 때 이외에는 팝업을 삼가합시다.

46. 다양한 기능으로 요소를 줄이자

단일 기능을 대량으로 정렬하여 보여주기 보다 다양한 기능을 배치하면 전체를 심플하게 알기 쉽게 할 수 있습니다. 무엇을 할 수 있는지 알기 어려운 부분도 있기 때문에 언제든 다양한 기능을 사용하는 것이 능사는 아닙니다.

47. 아이콘에 설명을 추가하는 것을  고려한다

아이콘을 사용하는 것은 문자 설명보다 알기 쉽지만, 반대로 의미전달이 제대로 되지 않을 수 있습니다. 그런 것을 고려하여 문자로 설명을 추가합시다.

48. 문장으로 설명하자

사용자는 간단한 디자인을 보러 온것이 아니라, 간단한 디자인은 사용자 목적을 달성하기 위해서입니다. 의미를 정확하게 전달하기 위해 문장으로 자세히 설명합시다.

49. 내용 일부를 공개하여  호기심을 자극하자

TV 드라마의 다음 예고편을 이미지합시다. 조금 보여지면 다음이 궁금해지게 됩니다.

50. 전환부분에서 보장하는 내용을 다시 알려준다

사용자는 이전에 자신의 결정이 올바른지를 생각합니다. 이를 다시 밀기 위해 위험부담감을 주기 위해 다시 알려주는 기능이 필요합니다.

51. 가격은 작게 보이게 한다

사용자에게 가격을 크게 보여주면 주저하게 되므로 요소별로 세밀하게 나누어 가격을 작게 보여줍니다.

52. 간단한 확인완료 메시지를 보여준다

사용자에게 감사함을 전달하기 위해 사업 내용 및 제품 또는 UI보다 인간적인 느낌이 날 수 있도록 합니다. 그리고 완료되었다는 알리어 번거로운 작업등이 이제 없다는 알리는 역할이기도 합니다.

정리

나열해 보았는데 이것들이 꼭 정답이라고 말하기는 어렵습니다. 참고용이며 사용자마다 좋은 UI는 다르기 때문입니다.
단, 이 내용을 토대로 확인한다면 좀더 좋은 사이트가 만들어 질 수 있을 것 같아 내용을 정리했습니다.

[출처] [UI/UX / Design Reference] 뛰어난 UI를 구현하기 위해 확인해야 할 52가지 점검표|작성자 olivestone12