미디어 플레이어의 볼륨 UI

미디어 플레이어 제공 시 볼륨 기능에 대한 정리.



1. 윈도우 미디어 플레이어

볼륨을 한번에 없애는 기능과 볼륨의 크기를 조절하는 기능을 주고 있음.
볼륨에 대한 일반적인 기능. 
상황 : 윈도우미디어플레이어에 숙달된 사용자가 아닌 이용자에게 볼륨 조절을 요청하는 경우
학습되지 않은 사용자에게는 오른쪽의 아래로 내려가는 화살표가 아니라 스피커처럼 생긴곳을 먼저 클릭하게 된다.
목적 : 볼륨을 낮추는 것
행동 : 스피커처럼 생긴것 클릭 --> mute상태 --> 잠시 당황 --> 운이 좋은 경우 오른쪽 아래의 화살표 클릭으로 볼륨 조절이
가능하다는 것을 알게 됨.

버튼에 버튼명이 없어서 버튼 기능의 유추 불가능한 점과 버튼의 형태가 볼륨조절의 메타포와 관련이 있다고 느껴지지 않는 다는 점 때문에 사용자의 플레이어 학습이 쉽지 않게 된다.

그래서 제가 MS와 전혀 관계없이  마음대로 바꾸고 저작권 개 무시... 후 변경 한 것. ㅡ,ㅡ;;;

아래와 같은 형태의 볼륨 UI를 만듬.
디자이너가 아니라서 어설프지만 시각적으로 볼륨을 올려지거나 내려진다는 것을 누구라도 알 수 있도록 설계하였음.
마우스 드래그 Interaction은 우상향으로 조절뿐 아니라 우향만으로도 가능하게 하는 것으로 규정 함.



2. 아이튠즈

아이튠즈가 윈도우미디어플레이어의 단점을 잘 정리.
상황 : 음악을 듣다가 전화가 갑자기 온 경우 --> 소리를 줄임 --> 전화가 끝나고 나면 --> 다시 소리를 키움

아이튠즈는 갑작스러운 상황에 mute에 대한 기능은 있으나 다시 상황종류로 복귀할 수 있는 방법이 간단하지 않음.
내가 듣던 기본 볼륨을 줄이고 나면 다시 올리기 위해서 마우스를 드래그 해야 하는 상황 발생.
소리에 까다로운 사람이면 mute전에 만족스럽게 듣던 소리와 같은 크기를 찾기 위해서 마우스를 위아래로 움직여야 하는
상황이 발생.

아이튠즈는 UI의 문제라기 보다는 Interaction의 문제라고 해도 될 듯.
내가 소리를 완전히 없애고 나서 상황 종료 후 이전의 소리로 한번에 돌아 갈 수 있는 방법이 필요.


3. 쥬크온


쥬크온은 위에서 말한 UI와 Interaction이 모두 포함되어 있다.
소리를 멈추고 다시 소리를 재생시키면 이전의 소리 그대로 돌아가 있다. 볼륨 조절을 위해서 윈도우미디어플레이어처럼
마우스로 알수없는 삼각형을 클릭해서 다시 볼륨을 조절해야 하는 불편함도 없다.


4. 네이버 플레이어


네이버 플레이어는 좁은 공간에서 볼륨을 줄이거나 불륨을 없애는 두가지를 모두 제공.
상황 : 볼륨을 줄이고 싶을 때 (마우스를 스피커로 이동 --> 스피커 클릭 --> 볼륨 조절 )
         볼륨을 없애고 싶을 때 (마우스를 스피커로 이동 --> 마우스를 스피커위로 이동 --> 위쪽의 스피커 클릭 --> 볼륨 없앰)
         볼륨을 다시 재생시키고 싶을 때 (마우스를 스피커로 이동 --> 스피커 위의 다른 스피커 클릭 --> mute 해제)


상황을 글로 보면 간단해 보이지만 미묘한 불편함을 계속 감수해야 함.
아래쪽에서 분명히 mute 표시가 있는데 반드시 클릭해서 위쪽의 mute 스피커를 클릭해야 한다는 점.

나라면 아래의 mute 스피커를 클릭하는것만으로 다시 원상태로 볼륨이 재생되도록 하겠음.


5. 다음 플레이어


다음은 네이버와 비슷한 형태의 볼륨 UI를 제공.
Interaction면에서는 다른 방식으로 제공.

네이버와 다르게 클릭을 할 필요가 없음.
마우스 오버만으로 볼륨 조절 가능. 볼륨 mute시 즉시 mute 해제가 가능.

상황 : 네이버와 비교하였음. 회색은 네이버에 비해서 없어진 쓸데 없는 액션들
         볼륨을 줄이고 싶을 때 (마우스를 스피커로 이동 --> 스피커 클릭 --> 볼륨 조절 )
         볼륨을 없애고 싶을 때 (마우스를 스피커로 이동 --> 마우스를 스피커위로 이동 --> 위쪽의 스피커 클릭 --> 볼륨 없앰)
         볼륨을 다시 재생시키고 싶을 때 (마우스를 스피커로 이동 --> 스피커 위의 다른 스피커 클릭 --> mute 해제)





아쉬운 점이 있다면 플레이어의 전체 프레임을 어두운 검은색을 사용했기 때문에 시각적으로 접근성이 떨어진다고
할수도 있고 시인성이 떨어진다고 할 수 있음.


6. 기타

현재 사용하는 윈도우 비스타는 네이버와 같이 클릭해야 볼륨 조절이 가능.
비스타는 마우스 오버시 정보의 summary를 보여준다. 클릭시 가동 이라는 일관성면에서는 아주 나쁜 선택은 아님.
하지만,
비스타에서도 마우스 오버만으로 볼륨 조절을 가능하게 했음.
물론, 저작권과 ㅡ.ㅡ;;; 상관이 없이
UI 변경.

[원본]


[변경]



참고 : 위의 글과 이미지와 개인적인 생각은 어떤 법적 정신적 책임도 지지 않음.
공간이 충분할 때는 제공 기능을 노출하는 방법이 좋지만 (쥬크온,아이튠즈 등) 공간이 협소하고 많은 기능을 제공할때는
(네이버플레이어,다음플레이어 등) 버튼만 노출하는 방법을 사용할 수 있음.




by mode | 2008/11/14 12:55 | magic | 트랙백 | 덧글(7)
트랙백 주소 : http://alwayslove.egloos.com/tb/2136610
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Commented by 골빈해커 at 2008/11/14 13:17
음.. 다른 건 모르겠지만, iTunes 의 경우에는 기본적으로 맥에서 만들어졌기 때문일거에요.
맥에는 기본적으로 시스템 전체를 뮤트 시키는 기능이 있고, 키보드에 기본 버튼으로 할당이 되어 있기 때문에 필요가 없거든요.
(화면 밝기, Expose, Dashboard, 백릿 밝기, iTunes 음량 및 앞 뒤, 일시정지, 재생, CD추출 버튼이 Function Key 위치에 기본 등록 되어 있음)

그리고.. 전화가 오면 뮤트보다는 일시 정지가 더 나을테니 별 상관은 없을거 같은데요.
어차피 음악 듣는거면 계속 그걸 보고 있었던 상태도 아닐테고 듣던 곳 부터 다시 듣는게 좋을테니..
그리고 의미 측면에서 보자면 오히려 iTunes 처럼 좌측, 우측 클릭시 최소, 최대 음량으로 바뀌는 것이 더 맞지 않나 싶기도 하구요.
Commented by 골빈해커 at 2008/11/14 13:21
아.. 참고로 맥 메뉴바의 볼륨은 http://golbin.net/pds/macvolume.png 이렇게 되어 있습니다.
역시 인터페이스는 맥이 짱. -_-)b
(이상 맥빠씀)
Commented by mode at 2008/11/14 14:34
나는 맥을 써본적이 없어서 윈도우에서 쓰는 아이튠즈를 말하는거고 윈도우 자체 기능도 소리를 없애는 기능이 있지만, 사용자 인터페이스라는 것은 같이 연관된 디바이스에 기능이 있다고 해서 빼도 되는건 아님.(문을 열면 창문을 연것처럼 공기도 통하고 햇빛도 들어오지만 그렇다고 창문을 건물에 달지 않아도 상관없음이라고 할 순 없다는 것.) 그외 맥에 대한 더 자세한 사항은 우선 사용한적이 없으니 패스를..
그리고 전화오면 일시정지를 사용한다는것은 사용자의 일반적인 행동에 더 맞는 말인데 예를 들어 적느냐고 그것까진 생각치 못하고 적은 듯.
좌측 우측 클릭시 최대 최소 음량은 내가 이해한대로라면 모든 플레이어가 공통구성이야.
마지막으로 알려준 이미지가 바로 다음이 처리한 방식같이 느껴짐. 나도 그렇게 제공하는것이 좋은 인터페이스라고 생각.
이상.. MS빠씀 ㅋㅋㅋㅋ
Commented by 민트 at 2008/11/14 23:14
한 번도 깊이 생각해 본 적이 없는데...
역시 전문가의 세계는 다르군요 ㅎㅎ
Commented by mode at 2008/11/14 23:41
보통 이렇게 정리하는건 그저 정리 차원이에요. 실제 프로젝트때는 회사라는 옵션이 붙는데 회사의 옵션안에는 회사의 정책, 회사의 문화, 담당자의 스타일, CEO의 의지, 그 당시의 유행, 그 당시의 신기술 등이 모두 종합적으로 적용되어집니다. 그리고 민트님은 이쪽으로 공부하시거나 일하시는 분이 아니니까~ ^^ 걍~~ 넘 깊이 생각안하셔도 된다는~~~
Commented by inuit at 2008/11/15 01:08
mode님 해코님하고 말놓는 관계..? ^^
Commented by mode at 2008/11/15 02:13
설마요~~ 제가 훨 누님인데~~ 저만 말을 놓죠~ +_+

:         :

:

비공개 덧글

< 이전페이지 다음페이지 >