'남자의자격'에 해당되는 글 1건

  1. 2009.08.02 남자의 자격 에서 본 UX: 컴맹도 쓸 수 있는 시스템을 만들자 (9)
[UX] 가벼운 이야기2009.08.02 22:06


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

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


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


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

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


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



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

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


[네이버 메일 파일첨부]


[다음 메일 파일첨부]



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

[티스토리 사진첨부]



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

[싸이월드 동영상 첨부]



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

[싸이월드 사진 첨부]




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



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 저도 몇번이나 티스토리 사진추가할때 드래그 하지 못한다는거 알면서도
    매번 드래그해서 창을 꺼트리곤 하는데.

    굳이 컴맹이 아니더라도
    파일 올리기같이 소소한(?) 부분의 ui도 개선되어야 할것 같네요~

    2009.08.06 18:19 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저만 그렇게 생각하는 게 아니었나 봅니다.^^ 요즘엔 많이들 파일전송시 드래그를 지원하고 있어서, 상대적으로 드래그를 지원하고 있지 않은 UI를 사용함에 있어서 많은 불편을 초래하는 것 같습니다.

      2009.09.12 15:51 신고 [ ADDR : EDIT/ DEL ]
  2. 안녕하세요. 홍익대학교 디자인혁신센터입니다. 저희는 UI/UX 정보를 널리 보급하여 알리는 비영리센터입니다. 컨텐츠를 자가생산하지는 않으므로 많은 검색과 리서치를 통해 좋은 자료들을 얻고 있습니다. 이 기사의 내용이 매우 유용하여 저희 홈페이지(http://openux.co.kr)에 싣고 싶습니다. 저작자와 출처는 반드시 밝히도록 하겠습니다. 행여라도 원하지 않으시면 삭제조치 하겠사오니 답변주시기 바랍니다. 감사합니다. ^^

    2009.08.06 23:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 안녕하세요. 부족한 글 임에도 불구하고 소개시켜 주시니 감사합니다. 저는 언제든지 환영입니다. 좋은 하루 되세요. ^^

      2009.09.12 15:51 신고 [ ADDR : EDIT/ DEL ]
  3. 티비를 보면서도 UX에 대한 생각을 하시는군요.
    티스토리의 사진 추가 UI는 다음 카페의 대문 관리에 사용하는 UI와 같군요.

    말씀하신것처럼 거대한(?) 빈 영역을 보면 정말이지 파일을 드래그해버리고 싶다는 생각이 꿈틀거립니다.
    (동감하는 바람에 의미없는 댓글을.. ㅋㅋ)

    2009.08.07 13:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 티스토리가 다음에 인수되어서 그런지 몰라도 같은 UI를 쓰고 있는것 같습니다. 티스토리 사진 업로드 UI도 한메일처럼 드래그를 지원했으면 하는 바램입니다.

      2009.09.12 15:51 신고 [ ADDR : EDIT/ DEL ]
  4. 손님

    좋은 글 잘 봤습니다.
    TV화면의 캡쳐를 통한 블로깅도 저작권법 위반에 걸릴 수 있습니다
    만에 하나를 위해서라도 출처를 밝히던지 그림은 삭제하시는게 좋을 것 같습니다. ^^.

    2009.08.21 18:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 댓글을 남겨주세요. ^^

    2010.05.21 09:57 신고 [ ADDR : EDIT/ DEL : REPLY ]