본문 바로가기

[UX] 가벼운 이야기

남자의 자격 에서 본 UX: 컴맹도 쓸 수 있는 시스템을 만들자



2009년 7월 26일(일) 에 방영된 '남자의 자격'을 보았습니다.

남자의 자격 은 죽기전에 해야 할 101가지 라는 부제를 가진 KBS의 예능 프로그램 인데요, 매 주마다 살아가면서 한번쯤 해보면 좋은일, 해보고 싶었던 일, 해봐야 되는 일들을 실천해보는 프로그램입니다.


이번에는 특히 디지털 완전정복이라는 코너가 있었습니다. 미션은 단체사진을 찍어서 인터넷에 올리는 것이었지요.이메일도 없는 40대들은 걱정이 태산이었습니다. 물론 이번 미션은 30대들은 도와주지 않는 방식으로 진행되었습니다.


카메라를 켜는 방법을 몰라 고민하기도 하고, SD메모리 칩을 꺼내는 방법을 몰라 고민을 하기도 하지요. 심지어 30분만에 메모리칩을 분리하게 됩니다. 심지어는 사진을 찍으려고 했는데, 사진이 아닌 동영상을 찍는 실수도 저지릅니다.
 

어쨌든, 우여곡절끝에 찍은 사진 동영상을 싸이월드에 업로드를 하려고 하는데 하는 과정 자체가 쉽지 않습니다. 내컴퓨터에 있는 동영상 파일을 싸이월드 창에 드래그해서 넣질 않나, 동영상 파일 올리기 버튼 상태를 누른 상태에서도 드래그를 하여 동영상을 넣으려고 시도하는 모습을 볼 수 있었습니다.


이 프로그램을 보면서 느낀것은, 40대 이상 사용자들(컴퓨터 사용이 익숙하지 않은 사람들)은 직관적인 UI를 원한다는 것이었습니다. 이전에는 다음과, 네이버의 메일 서비스에서 대용량 파일 첨부를 하기 위해서는 첨부 버튼을 눌렀어야 했습니다. 현재는 드래그도 허용한 상태이지만, 그 외의 사이트들은 아직도 사용자들에게 불편한 UI를 학습하게끔 하는 것 같습니다.



이에 파일 첨부를 할때 UI를 어떻게 설계하는지 찾아보았습니다.  그 중 몇 가지의 잘된 사례와, 개선의 여지가 있는 사례를 공유합니다.

먼저 잘 된 사례입니다.
네이버와 다음 메일 서비스는 파일 드래그가 가능하게끔 UI를 설계하였습니다. 파일 드래그를 하지 않더라도 '파일찾기' 버튼을 두어 파일을 찾을 수 있게 하고 있습니다. 아이콘과 적절한 설명글을 넣어 사용자가 드래그를 하고 싶게끔 도와주고 있습니다. 아이콘 측면으로만 보자면 다음의 아이콘이 네이버의 아이콘보다 좀 더 직관적인 아이콘인듯 하네요.


[네이버 메일 파일첨부]


[다음 메일 파일첨부]



다음으로는 개선의 여지가 있는 사례입니다.
티스토리는 현재 UI적으로 개선의 여지가 큽니다. 사진을 추가해달라는 문구가 있지만, 문구와 아이콘의 뉘앙스로는 왠지 그쪽으로 드래그를 하고 싶은 충동이 듭니다. 차라리 '사진을 추가해주세요!' 라는 문구보다, '사진 추가 버튼을 눌러 사진을 추가해주세요!' 라고만 했어도 이정도의 느낌은 들지 않을것 같네요. 사진 추가 버튼에 강조가 되어 있기는 하지만, 그것만으로는 사진을 드래그하고싶은 충동이 드는 넓은 빈 영역의 유혹을 뿌리칠 수 없을 것 같습니다.

[티스토리 사진첨부]



문제가 되었던, 싸이월드 동영상 첨부 화면입니다.
분명히 동영상 파일을 선택해 주세요 라는 친절한 문구가 있지만. 찾기 버튼이 생각보다 강조되어 있지 않습니다. Task 순서는 분명 1. 찾기 버튼을 누른다. 2. 다음 버튼을 누른다. 인데 화면상으로만 보면 그렇지가 않네요. 가장 좋은 해결책은 다음, 네이버의 메일처럼 드래그를 허용하는 것이겠지요.

[싸이월드 동영상 첨부]



싸이월드 사진 첨부는 마우스로 파일 첨부를 지원하고 있습니다. 파일을 추가 하고 싶은경우는 추가 버튼을 눌러서 추가할 수 있게 하고 있네요.

[싸이월드 사진 첨부]




이미지, 동영상, 파일삽입시의 오류는 결코 40대 이상에 국한된 것만이 아니라는 생각이 듭니다. 컴퓨터에 익숙하지 않은 모든 사용자들이 포함되겠지요. 
언젠가는 컴퓨터에 익숙하지 않은 사용자들도 편하게 사진을 올릴 수 있는 그날을 기대해봅니다.