> 기술 주변기기 > IT산업 > UX를 ​​염두에두고 비디오 플레이어를 디자인하는 방법

UX를 ​​염두에두고 비디오 플레이어를 디자인하는 방법

Joseph Gordon-Levitt
풀어 주다: 2025-02-10 12:22:13
원래의
404명이 탐색했습니다.

How to Design Your Video Player with UX in Mind 비디오 플레이어의 사용자 경험을 향상시키기위한 핵심 요소

볼륨 조정, 다음 비디오로의 점프, 자막 전환 및 비디오 품질 변경과 같은 재생 및 일시 정지가 아니라 여러 컨트롤을 제공함으로써 더 많은 시청자를 유치 할 수있는 잘 설계된 비디오 플레이어. 다양한 유형의 비디오는 다른 컨트롤이 필요합니다. 교육용 비디오는 속도 제어 및 북마크 기능의 혜택을받을 수 있으며 소셜 비디오에는 빠른 공유 옵션이 필요합니다.

키보드 바로 가기는 특히 고급 사용자의 사용자 경험을 크게 향상시킬 수 있습니다. 기본 단축키에는 시작/일시 정지 용 스페이스 바, 빠른 전달 및 뒤로를위한 화살표 키, MUTE의 경우 M 및 Full Screen 모드의 경우 F가 포함되어야합니다. 비디오 플레이어를 디자인하기 전에 대상 고객을 식별하는 것이 중요합니다. 사용자가 플랫폼 및 비디오 플레이어와 상호 작용하는 방법을 이해하면 전체 사용자 경험을 향상시켜 컨트롤 및 기능을 자신의 요구에 맞게 사용자 정의 할 수 있습니다. 이 기사는 학습 플랫폼, 소셜 미디어 플랫폼, 고급 사용자 또는 모바일 사용자와 같은 특정 사용 사례에 대해 선택 해야하는 다양한 비디오 플레이어 컨트롤, 목적 및 컨트롤을 탐색합니다. YouTube에 얼마나 많은 멋진 고급 사용자 컨트롤이 있는지 알고 있습니까? 계속 읽으십시오!

매력적인 비디오 플레이어는 더 많은 시청자를 유치 할 수 있습니다. 최신 비디오 플레이어는 이전 플레이에 따른 버튼보다 훨씬 더 많은 컨트롤을 제공 할 수 있습니다.

지금 YouTube를보세요. 사용자는 YouTube의 장 기능을 사용하여 비디오 클립을 찾아 볼 수 있습니다. 이 기능은 사용자가 관련 비디오 클립을 빠르게 검색하는 데 도움이됩니다.

특정 정보를 찾기를 희망하는 비디오를 얼마나 자주 볼 수 있지만, 특정 질문에 답하지 않는다는 것을 알게 되나요? 이것은 실망 스럽다!

정통한 YouTuber는 이에 대한 임시 솔루션을 찾았습니다. 그들은 비디오 설명에서 타임 스탬프가있는 다른 클립을 나열하는 것이 유용하다는 것을 알았습니다. 이 솔루션은 여전히 ​​특정 문제를 스캔하려면 설명을 열어야한다는 것을 의미합니다. 가장 중요한 것은 Google이 특정 주제에 대한 다양한 문제를 다루는 비디오를 색인화하기가 어렵다는 것입니다.

비디오 플레이어의 사용자 경험은 장을 추가하는 것 이상입니다. 온라인 학습 플랫폼의 비디오 플레이어는 YouTube 비디오 또는 제품 웹 사이트의 간단한 트레일러 비디오에 필요한 컨트롤과 다릅니다.

비디오 플레이어의 사용자 경험이 왜 중요한가?

YouTube와 같은 비디오 플랫폼을 예로 들어 보겠습니다. 사용자는 다양한 방식으로 콘텐츠를 소비합니다. YouTube에서 세 가지 다른 사용자 역할을 어떻게 사용할 수 있는지 살펴 보겠습니다.

    Alice는 YouTube를 사용하여 교육 정보를 신속하게 찾습니다. 그녀는 챕터 기능을 사용하여 관련 부품을 스캔합니다. 그녀는 또한 화살표 키를 사용하여 더 작은 점진적인 단계로 파편을 빠르게 건너 뛰기 위해 필요한 정보를 찾습니다.
  1. 벤은 게임 비디오를 보는 것을 좋아합니다. 그는 전체 화면을 입력하기 위해
  2. f
  3. 를 사용하는 전통적인 고급 사용자입니다. Alex는 배경 음악 아래에서 배우는 것을 좋아합니다. 그는 YouTube의 AutoPlay 기능을 사용하므로 올바른 학습 음악을 선택하는 것에 대해 걱정할 필요가 없습니다. 그는 종종 배경 음악을 선택하고 YouTube 알고리즘이 비디오 끝에서 비슷한 음악을 선택할 것이라고 믿습니다. 위의 시나리오는 비디오 플랫폼에 다양한 방식으로 사용하는 다양한 사용자가 있음을 보여줍니다. 따라서 최상의 사용자 경험을 제공하기 위해 올바른 컨트롤과 바로 가기를 선택하는 것은 어려운 일입니다.
  4. 어떤 비디오 플레이어 컨트롤이 있습니까?
  5. 많은 다른 비디오 플레이어 컨트롤이 존재합니다. 이 목록은 가장 자주 찾을 수있는 컨트롤을 요약합니다.
재생/일시 중지 버튼.

다음 비디오로 건너 뜁니다.

<.> 볼륨을 조정하십시오.

스위치 자막.

화면 크기 크기를 조정합니다 (미니 플레이어, 극장 모드 또는 전체 화면 모드). 대부분의 경우 전체 화면 모드로 들어갈 수있는 버튼이 있습니다. 그러나 YouTube를 사용하면 비디오를 화면 크기로 크기로 만드는 극장 모드를 입력 할 수 있습니다. 또한 미니 플레이어를 제공하므로 작은 비디오 플레이어를 사용하여 비디오를 보면서 YouTube를 탐색 할 수 있습니다.

<.> 비디오 품질을 변경합니다. 모든 사람이 인터넷 연결이 좋은 것은 아닙니다. 따라서 사용자는 품질을 조정할 수 있습니다. 비디오 품질을 자동으로 조정하는 옵션이 제공됩니다. 불안정한 인터넷 연결이있는 사용자의 경우 비디오 플레이어가 연결 속도에 따라 비디오 품질을 자동으로 조정할 수 있습니다. 대부분의 사용자는 중단없이 비디오를 계속 보도록 품질을 줄이는 것을 선호합니다.

일반적인 제어는 다음이 포함되어 있지 않습니다

비디오 플레이어 속도를 조정하십시오. 이 컨트롤을 사용하면 비디오 속도를 늦추거나 속도를 높일 수 있습니다. 일반적으로 비디오 플레이어 속도를 0.25와 2 사이의 25% 단계로 조정할 수 있습니다.
    자동 재생 기능을 활성화하려면 전환하십시오. 음악을 듣거나 컨텐츠 알고리즘을 선호하여 다음에 볼 내용을 결정하는 데 유용합니다.
  • 회귀와 빠르게 전달됩니다. 유용하지만이 제어는 대부분 숨겨져 있습니다. 예를 들어 YouTube를 사용하면 키보드 바로 가기를 사용 하여이 컨트롤을 사용할 수 있습니다. 기본 비디오 컨트롤의 일부로이 기능을 구현하는 비디오 플레이어는 거의 없습니다.
  • 설정. YouTube는 기본 제어 세트에서 기어 아이콘을 구현합니다. 그러나 YouTube의 비디오 플레이어는 복잡합니다. 설정 컨트롤을 사용하여 거의 사용되지 않은 다른 비디오 컨트롤을 숨 깁니다.
  • 마지막으로, 우리는 현재 타임 스탬프와 비디오 길이를 어떻게 표시하는지 잊지 말아야합니다. 가장 쉬운 솔루션은 먼저 현재 비디오 타임 스탬프를 표시 한 다음 총 비디오 길이를 표시하는 것입니다. 이 예에서는 총 비디오 길이가 2 분 13 초인“0:40 / 2:13”으로 비디오를 40 초 동안 일시 중지했습니다. 반면에 일부 비디오 플레이어는 비디오의 나머지 길이를 보여줍니다. 사용자를 혼동하기 때문에이 작업을 수행하지 마십시오.

    다음 섹션에서는 일반적으로 사용되는 일부 및보다 실험적인 키보드 바로 가기를 소개하여 비디오 플레이어를 탐색합니다. 고급 사용자를위한 비디오 플레이어를 디자인하는 방법은 무엇입니까?

    점점 더 많은 사용자가 키보드 바로 가기에 익숙해지면서 부족하면 종종 실망스러운 비디오 플레이어 경험이 발생합니다.

    키보드 바로 가기는 고급 사용자의 사용자 경험을 향상시킬 수 있습니다.

    예를 들어 , 나는 그들의 비디오 플랫폼을 사용하여 벨기에 TV를 온라인으로 시청하는 것을 좋아합니다. 플랫폼은 맞춤형 비디오 플레이어를 구현합니다. 불행히도 화살표 키를 사용하여 비디오를 되돌아 가거나 빨리 전달할 수 없습니다. 가장 중요한 것은 우주 막대를 눌러 비디오를 일시 중지하거나 파악할 수 없습니다. 비디오 플레이어는 터치 패드를 사용하고 마우스를 작은 일시 중지 아이콘으로 탐색하도록 강요합니다. 실망 스럽습니까?

    현재 비디오 플레이어는 최소한 기본 키보드 바로 가기 세트를 구현하여 기본 사용자 를 충족시켜야합니다.

    우주 막대 : 시작/일시 중지 비디오 오른쪽 화살표 키 : 빠른 전달 비디오 5 또는 10 초 왼쪽 화살표 키 : 5 초 또는 10 초 동안의 리위 비디오

    m : 음소거 또는 비디오 사운드를 끄면

f : 전체 화면 모드를 입력하거나 종료하십시오 그러나 왜이 키보드 바로 가기에 옵션이 제한됩니까? YouTube는 키보드 단축키 구현의 리더입니다. Advanced YouTube 사용자로부터 배울 수있는 것은 다음과 같습니다.

    눌린 를 누르면 비디오를 10 초 동안 되 돌리고 왼쪽 화살표 키는 5 초 동안 비디오를 되돌립니다.
  • 를 누르면 를 누르면 비디오가 10 초 동안 빠르게 전달되는 반면 오른쪽 화살표 키는 비디오를 5 초 동안 빠르게 전달합니다.
  • 숫자 키는 알려진 키보드 단축키입니다. 0
  • 를 누르면 비디오의 시작 부분으로 연결됩니다. YouTube는 또한 각 비디오를 9 개의 길이로 나눕니다. 길이에 관계없이, 숫자 키 (0 제외)를 누르면 비디오에서 해당 위치로 이동합니다. 이것은 끝까지 점프하여 시작 또는 중간 어딘가로 돌아가는 좋은 방법입니다.
  • YouTube는 동시에 5 초 또는 10 초 동안 빠르게 전달/재 위트 기능을 구현합니다. 비디오의 작은 세부 사항을 놓치면 왼쪽 화살표 키를 사용하여 빠르게 되감을 수 있습니다. 비디오를 스캔하려면 l 키를 눌러 10 초 간격으로 비디오를 스캔 할 수 있습니다.
  • 다른 목적을위한 다양한 유형의 비디오 컨트롤 교육 비디오, 소셜 비디오 및 모바일 비디오와 같은 다양한 목적으로 구현 된 다양한 컨트롤에 대해 논의 해 봅시다. 교육 비디오
  • Udemy 또는 Coursera와 같은 플랫폼에서 교육용 비디오로 구현되는 컨트롤은 일반 비디오 플레이어와 다릅니다. 예를 들어, 사용자는 종종 튜토리얼 비디오 속도를 높이는 것을 선호합니다. 따라서 이것은이 플랫폼에서 찾은 일반적인 제어입니다.
또한 교육용 비디오는 북마크 기능과 밀접한 관련이 있습니다. 사용자는 비디오의 특정 순간을 북마크하고 댓글을 달 수 있습니다. 이 기능을 통해 사용자는 참조를 위해 비디오에서 중요한 순간을 표시 할 수 있습니다.

소셜 비디오

소셜 비디오는 빠른 공유 옵션에서 가장 혜택을받습니다. YouTube를 사용하면 비디오를 공유 할 수 있지만 표준 제어 세트의 일부는 아닙니다. 그들은 비디오 플레이어의 맨 아래에 기능을 추가했습니다.

그럼에도 불구하고, 비디오 플레이어 컨트롤의 일환으로 빠른 공유 옵션을 구현하는 것이 여전히 가치가 있습니다. 특정 타임 스탬프에서 공유 할 기능을 추가하는 것을 잊지 마십시오. 대부분의 경우 사용자는 비디오의 특정 순간을 친구와 공유하려고합니다.

반면에 Twitch를 사용하면 사용자가 비디오 플레이어에서 직접 비디오를 편집 할 수 있습니다.

클립 시청자는 브로드 캐스트에서 가장 독특한 트위치 순간을 빠르게 공유 할 수있게되며 방송사는 소셜 공유를 통해 채널을 개발할 수 있습니다!

이것은 재미있는 순간, 훌륭한 게임 또는 공유 할 가치가있는 다른 순간을 신속하게 편집하는 훌륭한 기능입니다.

https://www.php.cn/link/4f9ef38edcfc460a00cbb8ed5dee299c 모바일 비디오 플레이어

모바일 비디오 플레이어는 더 간단한 디자인이 필요합니다. 모바일 장치의 화면에 많은 수의 컨트롤을 추가하는 것은 불가능합니다.
예를 들어 YouTube의 모바일 비디오 플레이어는 다음 컨트롤을 제공합니다.

전체 화면 모드를 입력하십시오 다음 또는 이전 비디오로 이동

비디오를 일시 중지 자막 활성화 비디오 설정 열기

올바른 비디오 플레이어를 디자인하려면 청중을 정의하십시오. 사용자에게 문의하여 플랫폼 및 비디오 플레이어 사용 방법을 배우십시오.

예를 들어 Twitch의 편집 기능은 다른 비디오 플레이어 중에서 독특합니다. 이 기능은 사용자 기반이 라이브 스트리밍 중에 훌륭한 순간을 신속하게 절약하기에 적합합니다.

고급 사용자를 기억하는 것을 잊지 마십시오. 키보드 단축키를 사용하여 Mute Video Sound, Fast 전달 비디오 및 전체 화면 모드로 이동하는 기본 비디오 작업을 수행하는 것을 좋아합니다.

영감을 얻으려면 사용 가능한 모든 YouTube 키보드 바로 가기를 확인하십시오!

마지막으로, 자신의 비디오 플레이어를 구축 할 수있는 능력이 있다면 위에 제공된 팁을 기억하십시오. 그러나 기성품 솔루션을 찾고 있다면 위의 논의는 사용 가능한 옵션을 볼 때 생각할 음식을 제공해야합니다.

사용자 경험 (FAQ)에서 비디오 플레이어 디자인을 고려할 때 FAQS 비디오 플레이어를 설계 할 때 사용자 경험 측면에서 어떤 주요 요소를 고려해야합니까?

비디오 플레이어를 디자인 할 때 고려해야 할 핵심 요소에는 단순성, 직관성 및 응답 성이 포함됩니다. 사용자를 산만하게하지 않도록 불필요한 지저분한 것을 피하기 위해 디자인은 간결하고 명확해야합니다. 처음으로조차도 컨트롤은 직관적이고 이해하기 쉬워야합니다. 비디오 플레이어는 응답이 있어야합니다. 즉, 다른 장치와 화면 크기에서 원활하게 실행해야합니다. 또한 이러한 기능이 사용자 경험을 크게 향상시킬 수 있으므로 조정 가능한 재생 속도, 품질 선택 및 자막과 같은 기능을 포함하는 것을 고려하십시오.

비디오 플레이어가 사용자가 더 쉽게 사용할 수 있도록하는 방법은 무엇입니까?

비디오 플레이어를 디자인 할 때 어떤 일반적인 실수를 피해야합니까?

비디오 플레이어를 디자인 할 때 피해야 할 몇 가지 일반적인 실수에는 지저분한 인터페이스, 혼란 스럽거나 낯선 아이콘, 비디오 플레이어의 응답 속도가 없습니다. 또한 특히 페이지에 여러 동영상이있는 경우 사용자가 지루할 수 있으므로 동영상을 자동으로 재생하지 마십시오. 대신, 사용자가 준비되면 비디오 재생을 제어하도록하십시오.

내 비디오 플레이어가 모든 사용자가 액세스 할 수 있는지 확인하는 방법은 무엇입니까?

비디오 플레이어가 모든 사용자가 액세스 할 수 있도록하기 위해 자막 또는 폐쇄 자막 (청각 장애) 및 오디오 설명 (시력 장애)과 같은 기능을 포함합니다. 또한 모든 컨트롤이 키보드를 통해 쉽게 작동하여 마우스를 사용할 수없는 사람들을 용이하게하십시오. 또한 높은 대비 색상을 사용하여 컨트롤과 텍스트를 표시하여 모든 사용자가 쉽게 볼 수 있도록합니다.

비디오 플레이어의 가용성을 테스트하는 방법은 무엇입니까?

사용자 테스트를 수행하여 비디오 플레이어의 유용성을 테스트 할 수 있습니다. 여기에는 비디오 플레이어와의 사용자의 상호 작용을 관찰하고 직면 한 어려움을 기록하는 것이 포함됩니다. 설문 조사 또는 인터뷰를 통해 사용자 피드백을 수집 할 수도 있습니다. 또한 분석 도구를 사용하여 사용자가 가장 자주 사용하는 컨트롤 및 비디오 시청 기간과 같은 비디오 플레이어와 상호 작용하는 방법을 추적하십시오.

비디오 플레이어의 로딩 속도는 얼마나 중요합니까?

비디오 플레이어의 로딩 속도는 매우 중요합니다. 비디오가 너무 길면 사용자가 시청을 포기할 수 있습니다. 따라서 비디오 파일 크기를 최적화하고 빠르고 안정적인 호스팅 서비스를 사용하여 비디오 플레이어가 빠르게로드되도록하십시오. 또한 사용자가 비디오가로드되고 있음을 알 수 있도록로드 표시기를 포함시키는 것을 고려하십시오.

비디오 플레이어에 소셜 공유 옵션을 포함시켜야합니까?

비디오 플레이어에 소셜 공유 옵션을 포함하여 사용자는 소셜 미디어 플랫폼에서 비디오를 쉽게 공유 할 수 있으므로 컨텐츠의 범위를 확장 할 수 있기 때문에 유익 할 수 있습니다. 그러나 이러한 옵션이 침습적이지 않으며 시청 경험을 방해하지 않도록하십시오.

내 비디오 플레이어를 경쟁에서 돋보이게하는 방법은 무엇입니까?

비디오 플레이어 디자인에서 컬러가 어떤 역할을합니까?

컬러는 비디오 플레이어 디자인에서 중요한 역할을합니다. 중요한 컨트롤에주의를 끌고 버튼의 활동을 나타내며 플레이어의 전반적인 아름다움을 향상시키는 데 사용될 수 있습니다. 그러나 선택한 색상이 너무 산만하지 않으며 색상 비전 결함이있는 사용자를 포함하여 모든 사용자가 액세스 할 수 있는지 확인하십시오.

모바일 장치 용 비디오 플레이어를 디자인하는 방법은 무엇입니까?

위 내용은 UX를 ​​염두에두고 비디오 플레이어를 디자인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿