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

링크는 링크스럽게 표현하자

MIRiyA☆ 2008. 12. 9. 10:59


진짜, 이 글 보고 별 지랄같은걸로 다 트집잡는다고 할 수도 있겠지만, 솔직히 나는 이게 불만이다.

그리고 불만 쌓인걸 표현하는게 내 스타일이기도 하고.



난 일단 레이어 방식 관리 화면이 맘에 안들기도 했지만, 오늘의 주제는 그게 아니다.

저기 통하기 1건이라고 되어있는 링크가 맘에 안들었다.



첫째. 링크를 클릭하기가 힘들다.

[통하기 1건]이라고 되어있는데, 저 '1'에만 링크가 걸려있다. 그래서 클릭하기가 무지하게 불편하다.

최선의 방법은 '통하기 1건' 한 칸 전체를 다 링크 처리하는 것이다.


둘째. 링크가 있는지 알 수 없다.

1068개, 댓글 4637개, 엮인글 12163개, 방명록 283개 | 통하기 1건 , 나를 즐겨찾은 사람 98

이라고 되어있는데, 저기에 링크가 있는지 알 수가 없다. 오로지 이용자가 생각하기에 "저 굵은 글씨 누르면 뭔가 나오겠군!"하고 의식적으로 마우스 오버를 해야만 알 수 있는 것이다. 이용자의 액티브한 행동이 있어야만 저 링크는 활용된다.


일단은 최선의 방법이라면 아래와 같이 하는게 좋을것이다.


1068, 댓글 4637, 엮인글 12163, 방명록 283 | 통하기 1 , 나를 즐겨찾은 사람 98

이러면 확실히 링크가 있어보이고, 마우스 클릭하기도 넓어서 좋다. 근데 너무 난잡한가?


1068, 댓글 4637, 엮인글 12163, 방명록 283 | 통하기 1 , 나를 즐겨찾은 사람 98

이건 어떤가? 에이.. 지금 보니 숫자와 문자의 밑줄 색이 달라 보기 번잡하다.


1068개, 댓글 4637개, 엮인글 12163개, 방명록 283개 | 통하기 1건 , 나를 즐겨찾은 사람 98

이러면 일단 제일 깔끔하기는 하다. 링크 가독성도 확 올라간다. 링크스러워보이잖아.


근데 통하기 1건의 껄쩍지근함은 가시지 않았다.. 저걸 구현한 사람들은 저걸 만들면서 어떤 생각을 했을까?

참.. 참.. 정말 생각할거 천지다. 아예 그냥 요즘 최신 유행으로 대빵만한 플래시 만들어서 넣어버릴까?




이렇게?;


당신이라면 어떻게 하겠는가?

난 저게 너무 고민된다. 저 한자릿수 숫자의 껄쩍지근한 클릭감을 대체 어떻게 할건가?





덧붙여서 글 길게 쓰련다.

일단 씹기 좋은 구글 예를 들어보자. 구글은 UI는 진짜 못생기게 만들고 무성의한 놈들이지만 이런 기본적인건 엄청 잘한다.



일단 상단의 링크들을 보자.



Gmail   캘린더   문서도구   사진   리더   웹문서   더보기

이건 꽤 잘 했다. 지금은 내가 테마를 바꿔놔서 위 스크린샷에는 링크 색이 변했지만, 원래는 이용자 경험에 기반한 '링크'의 형태를 충실하게 재현했다. 파란 글씨에 밑줄 이용자가 느끼기에 가장 링크스럽다. 단어 하나하나 적절한 간격으로 떨어져있어서 잘못 눌러 열폭할 가능성도 적어보인다. 일단 지금 다음 블로그의 [등록] [취소] 버튼 간격보다 멀다. 2~3픽셀 차이지만 체감의 불안도는 히말라야 산맥과 동네 뒷산 수준.



miriya.lee@gmail.com | 환경설정 | 이전 버전 | 도움말 | 로그아웃

그 우측도 비슷하지만 예전부터 한번 씹어버리고싶었던 부분은 앞의 메일 주소 부분이다. 나라면 메일 주소를 클릭하면 바로 지메일로 이동하도록 링크걸었을 것이다. 사실 그렇지 않나. 좌측에서 작은 Gmail 단어 찾는것보다 우측에 길게 늘어진 miriya.lee@gmail.com 찾는게 더 쉽다. 더 눈에 잘 띈다는 것이다. @ 어쩌고저쩌고 나와있는건 상당히 메일주소스럽다. 반면 Gmail은 메일주소로 와닿지 않는다. 찰나의 순간동안 느끼기에 그저 하나의 단어로 보일 뿐이다. 주욱 늘어진 단어들 중 순간적으로 '메일'을 연상케 하는 뚜렷한 단어는 저 miriya.lee@gmail.com밖에 없다. 근데 저걸 클릭해도 지메일로 가지 않으니 실망했던 것이다.



지메일은 기본 테마 화면에서 링크가 걸린 중요한 텍스트는 대부분 저런 링크스러운 서식을 사용하였다.

바람직하다. 링크들은 이걸로 되었고.. 이제 지메일 로고를 보자.




저 로고를 클릭하면 언제든 지메일 초기 화면으로 이동할 수 있다. 나는 이게 너무나 행복했다. 언제나 고향으로 돌아갈 수 있는듯 한 안정감을 느낄 수 있다.



Gmail   캘린더   문서도구   사진   리더   웹문서   더보기

위 링크 목록에서 Gmail 부분에 링크가 빠져있는 이상, 지메일 메인으로 돌아가기에 가장 좋은 방법은 로고를 클릭하는 것이다.



이용자는 본능적으로 네비게이션을 화면 상단에서 찾는다.

로그인 창을 왼쪽 위에서 찾는것과 마찬가지고, 이건 책상위 휴대폰을 마우스인줄 알고 움켜쥐는 행동과 다른게 없다. 사용자 경험을 존중하라. 사용자의 책상에 휴대폰을 얹어놓지 말고 마우스를 얹어 놓아야 세련된 서비스라 말 할 수 있을것 같다.


스프 떠먹던 큰 스푼으로 좁은 컵에 담긴 딸기 무스를 떠먹으려 시도하던 나에게 잽싸게 달려와 작은 스푼을 건내던 신라호텔 뷔페 직원.. 그리고 더 나아가 딸기 무스 옆에 작은 스푼들을 잘 보이게 놔두는 철저한 배려정신. 이 정도면 센스있지 않은가?


이용자에게 도움 되며, 제공자에게 수익을 주는 서비스에서 더 나아가 세련된 모양새와 철저히 배려한 사용성을 갖춘 귀족적인 서비스를 보고싶은 작은 희망이 있다.





ps. 사용성 논하는 블로그에서 우클릭이랑 드래그 안된다고 뭐라 하는 분이 있었는데, 이건 6개월간 개선되지 않은 다음 블로그의 정책 문제이며, 지난주 토요일에 관계자에게 구두로 개선 확인을 받았다. 그저 기다릴뿐.. [관련글]