태그 : 볼륨
2008/11/14   미디어 플레이어의 볼륨 UI [7]
미디어 플레이어의 볼륨 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)
< 이전페이지 다음페이지 >