UI&사용성 이야기/UI 디테일

안좋은 버튼 레이아웃의 전형적인 예

MIRiyA☆ 2011. 8. 6. 23:19



이건 다음 블로그의 모바일 페이지인데, 매번 댓글을 작성할때마다 껄끄럽다.

취소 버튼과 등록 버튼이 가까이에 붙어있기 때문이다. 등록 버튼을 누를때마다 취소 버튼에 손이 닿지 않을까 긴장하게 만드는 좋지 않은 레이아웃이다. 취소 버튼은 왼쪽 귀퉁이에 붙여놓고, 등록 버튼은 시각의 흐름에 맞춰 비공개 버튼과 함께 오른쪽 귀퉁이에 붙이는게 좋을것 같다. 


그리고 내용 창 옆에 내용이라고 붙여놓은것도 영 쓸모없어보인다. 걍 너무나 당연한건 설명해줄 필요가 없다고 생각하기 때문이다. 또한 한 페이지에 끝나는 댓글창인데 위에도 아래에도 취소/등록 버튼을 다 달아놓은것도 뭔가 낭비다. 위쪽 버튼은 아이폰 기본 UI에 대한 예의고 아래쪽 버튼은 기존 웹 UI에 대한 예의냐. 당최 뭘 지향하는지 모르겠다. 걍 원래 하던대로 아래에 붙이는걸 권한다.


이 외에도 내용 란은 HTML 코드가 어떻게 되어있는지, 아이폰에서 커서 깜빡이는게 보이지를 않는 고약한 문제가 있었는데 이건 아무래도 해결된것 같다. 간만에 써보니 문제가 사라져서 반갑네.




이건 자주 가는 학교 커뮤니티의 댓글 입력창 근처인데.. 보면 대략 헬인걸 알 수 있다. 나라면 목록은 왼쪽 끝에 붙이고, 새글쓰기는 과감히 없애고 답변 버튼만 남겨놨을것 같다. 이건 뭐 쓰다가 좆될 경우가 거리상 없기에 문제가 약한 편인데..




이건 학교 커뮤니티의 글쓰기 화면인데.. 길게 길게 잘 써놓고 글쓰기 버튼 바로 옆의 목록 버튼을 누를까 조바심이 날 기세다. 인간적으로 목록 버튼 같은건 멀찍히 왼쪽 끝에 치워놔야하지 않겠나. 게다가 목록 버튼과 글쓰기 버튼은 색으로 구분되어있지 않고 그냥 허여멀건 색이라 위험성은 더 증대된다.


이런식으로 곳곳에 지뢰밭처럼 치명적인 결과를 초래할 수 있는 버튼들이 혼재되어있는 레이아웃은 나쁘다. 피츠의 법칙이나 힉스의 법칙 등을 가지고 오지 않아도 이런건 레이아웃 기획시 본능적으로 판단하여 다 걸러내야 하는 부분이다. 이게 마우스 입력시에는 또 문제가 안되는데, 요새 태블릿 유행하면서 태블릿으로 터치한다면 문제가 더 커진다. 사람의 손가락은 그닥 정밀하지 않기 때문이다. 발전하자.