지금 당장 적용할 수 있는
'10가지 UI Tips'
정말 간단하지만, 정말 강력한 10가지 팁을 확인해보세요.
*아래 페이지에 대한 번역입니다.
https://www.uidesign.tips/ui-tips
1. 삭제하기 전에 반드시 확인
사용자가 아무런 확인 과정 없이 삭제하게 두지 마세요. 사용자는 자주 잘못 터치합니다. 만약에 한 번의 터치만으로 정보가 삭제된다면 사용자는 크게 당황할 것이고 결국 여러분의 서비스에 대한 부정적인 생각을 갖게 될지도 모릅니다. 그렇기에 여러분은 UI를 통해(인라인 또는 팝업으로) 삭제 전에 확인 과정을 반드시 넣어줘야 합니다. 물론 '취소'기능이 있긴 하지만, 다양한 변수에 따라 어떻게 될지 모르기 때문에 미리 대비하는 게 좋습니다.
정말 삭제할 것인지 확인이 필요합니다.2. 삭제하시겠습니까?
삭제하는 상황에서 특히 버튼에 작성되는 문구에 집중하세요. 맥락 없이 '예', '아니요'와 같은 문구는 피하는 게 좋습니다. 대신에 명확하고, 버튼이 불러올 결과를 명확히 파악할 수 있는 문구를 사용하는 게 좋습니다.
명확한 문구는 곧 명확한 행동을 유도합니다.3. 위험한 건 눈에 덜 띄게
'삭제'처럼 비교적 위험한 행동은 덜 강조되게 만드는 게 좋습니다. 왜냐하면 위험한 행동보다는, 우선순위가 더 높은 행동을 강조해야 하기 때문입니다. 또한 덜 중요한 디자인 요소를 미리 만들어 사용하는 것이 좋습니다.
빨간색이라고 무조건 눈에 띌 필요는 없습니다. 다른 스타일을 적용해보세요.4. 뭘 눌러야 하는지 한눈에 알 수 있게
화면에 항상 CTA(Call-To-Action) 버튼을 두세요. 대다수의 사용자들은 인내심 있게 웹사이트(앱)를 끝까지 내리지 못합니다. 때문에 중요한 버튼은 바로 확인할 수 있도록 해야 합니다.
5. 사용자들에게 미리 알려주기
사용자가 '다음엔 어떻게 되는 거지?'라고 추측하게 만들지 마세요. 무슨 일이 일어날지 모르는 순간 사용자들은 버튼을 누르기 어려워진다는 걸 명심하세요. '예약하기'처럼 강한 메시지는 사용자들에게 '이걸 누르면 바로 돈이 나가는 건가?'와 같은 스트레스를 줄 수 있습니다. 때문에 버튼을 누르면 돈이 지불되는지 안되는지 등의 내용을 미리 알려주는 것이 좋습니다.
사용자의 스트레스를 덜어주세요. 현재 상태와 앞으로의 과제를 미리 알려주세요.6. 사람의 시선은 Z를 그린다
구텐베르크의 다이어그램이라고 들어 보셨나요? 간단히 설명하자면 사람의 눈은 Z 모양을 따라 내용을 인지한다는 내용입니다. 때문에 가상의 Z를 그려 시선이 끝나는 지점에 CTA 버튼을 두면 효과적으로 사용자의 행동을 유도할 수 있습니다.
자연스러운 시선의 흐름을 생각하세요.7. 불규칙한 요소들 정렬하기
우리는 종종 다른 사이즈의 요소들을 정렬해야 합니다. 같은 폭을 기준으로 배치하더라도 어딘가 어색해 보일 때가 있습니다. 이런 상황을 타파할 가장 좋은 방법은 '동일한 너비'를 주는 것입니다. 여러 개 중 가장 큰 요소를 선택하고, 그 요소의 너비만큼을 다른 요소에도 적용한 후에 배치해보세요.
8. 더 나은 메뉴 만들기
메뉴는 잘 보이냐 안 보이냐의 이슈가 많이 발생하는 부분입니다. 메뉴를 당장 눈에 잘 보이게 하는 방법 중 하나는 '아이콘'을 추가하는 것입니다. 사용자는 메뉴의 글자를 전부 읽지 않고서도 아이콘만으로 이게 어떤 메뉴인지 파악할 수 있습니다. 또한 현재 활성화된 메뉴를 강조하는 것도 메뉴를 개선하는 좋은 방법입니다.
9. 소셜 로그인
소셜 로그인은 빠르게 서비스에 가입하게 만드는 좋은 방법입니다. 때문에 소셜 로그인 옵션들을 상단에 배치하고, 하단에 이메일과 패스워드 입력란을 위치시키는 게 좋습니다. 개인 정보에 민감한 사용자들은 소셜 로그인보다는 이메일로 서비스를 이용하는 걸 선호하기 때문에 이메일 로그인 옵션은 반드시 필요합니다.
10. 디폴트 상태로 둘 탬플릿
디폴트 상태를 그냥 백지상태로 두기보다는 탬플릿을 만들어 제공하는 것이 좋습니다. 백지상태로 둘 경우 사용자가 아예 새로운 내용을 만들어야 하기 때문에 부담이 생깁니다. 미리 만들어놓은 탬플릿을 제공할 경우, 사용자는 더욱 빠르게 선택하고 더욱 편리하게 서비스를 이용할 수 있을 것입니다.
