호버 상태가 필요합니까?

“예”에 투표합니다! 사실, 터치 기기가 매우 인기가 있기 때문에 호버 이벤트 에 의존해서는 안됩니다.하지만 Jon은 버튼의 시각적 호버 상태 에 대해 질문하는 것 같습니다. 약간 다른 점입니다.

시각적 호버 상태는 “클릭 가능성”을 제공합니다. 확인하기 위해 무언가를 클릭 할 필요는 없습니다. “버튼 인 경우. 랩톱 및 데스크톱 사용자는 마우스를 올려 놓을 때”클릭 가능한 “항목이 반응 할 것으로 기대하며”조명 “버튼이있는 것이 유용한 단서입니다.

점진적 향상 . 사용할 수있는 사용자에게 유용합니다. 그리고 할 수없는 사람들에게는 무해합니다!

댓글

• 사실 저는 ‘ 데스크톱에서 그렇게 말할 것입니다. 브라우징 환경에서 사용자는 커서 만 변경되면 뭔가 잘못되었다고 생각할 수 있습니다. 우리는 마우스 오버 변경에 너무 익숙해졌습니다.
• 그것이 저의 가장 강력한 주장 / 생각이었습니다. 우리는 ‘ 매우 익숙해 져서 ‘ 그것을 가지고 있지 않다는 것이 이상 할 것입니다.
• 좋은 지적입니다. 점진적 향상에. 그래도 ‘ "You shouldn't have to click something to find out if it's a button."에 한 가지 더 추가하겠습니다. ‘ 버튼인지 확인하기 위해 항목 위로 마우스 오버 할 필요가 없습니다. ‘

디자인에서 호버 상태를 최대한 피하려고합니다. 그 주된 이유는 터치 장치에서는 의미가 없기 때문입니다.

모바일 용으로 설계하지 않을 때는 “적용되지 않는 것처럼 보일 수 있지만, 많은 사람들이 태블릿이나 기타 터치 장치를 사용하여 동일한 웹 사이트를 탐색하거나 일반적으로 마우스가있는 컴퓨터에서만 사용하던 것과 동일한 애플리케이션을 사용합니다.

자신을 제한하여 호버 이벤트를 사용하지 않으려면 사용중인 기기에 관계없이 경험을 향상시킬뿐만 아니라 나중에 터치 전용 기본 애플리케이션을 더 쉽게 만들 수 있습니다.

댓글

• 마우스 오버 상태는 모바일 웹 사이트에서 여전히 유용합니다. CSS :hover는 휴대 기기에서 볼 때 효과적으로 :active로 취급됩니다. 이렇게하면 사용자가 ‘ 손가락이 대상에 부딪혔다는 시각적 피드백을 제공합니다. 이 피드백은 시차로 인해 모바일 디자인에서 훨씬 더 유용합니다. 시선이 화면의 수직선에서 벗어나면 잘못 탭할 가능성이 높아집니다.
• @JoJo 호버 상태는 모바일에서 ‘ 검색 할 수 없습니다. , 탭하는 것은 컴퓨터를 클릭하는 것과 같습니다.
• John, 제가 ‘ 모바일 데스크톱 용으로 디자인 한 사이트를 본 경험상 저는 JoJo는 호버 상태가 [때때로] 활성 상태로 작동한다고 말하는 것이 맞습니다. 가끔은 ‘ 조금 까다 롭고 ‘ 항상 표시되지 않기 때문에 말합니다.
• @Jon I ‘ 번역 방법에 대해 논쟁하는 것이 아니라 ‘ 번역하는 것이 합리적이라고 주장합니다. 호버가 활성화되면 어떻게 선택합니까? 두 번 탭 하시겠습니까? 전체 터치 패러다임을 깨뜨립니다.
• @JoJo 항상 그런 것은 아닙니다. 저는 ‘ Android의 Chrome이 호버 상태를 전혀 발생시키지 않으며 Safari ‘의 호버 상태는 종종 어색합니다.

터치는 소프트웨어와 상호 작용하는 주요 방법입니다. 마우스 오버 기반 상호 작용은 이제 “향상된 기능이 있으면 좋습니다”로 강등되지만 소프트웨어와 상호 작용하는 데 필수 조건이되어서는 안됩니다.

나는 종종 : focus에 대한 : hover 상태를 복제합니다. 이것은 키보드 만 사용하는 사용자 (WCAG2를 충족하는 데 필요함)에 초점을 표시하는 유용한 방법이기 때문입니다. ). 사용자가 아직 시작하기로 결정하지 않은 작업을 트리거하는 클릭 이벤트없이 항목이 어떤 방식 으로든 상호 작용 함을 나타냅니다. : hover없이 : focus에 대한 스타일을 지정할 수 있지만, 제 생각에는 두 작업의 의도는 동일하며 실제적으로 동일한 시각적 효과를 가져야합니다.

또한 호버 상태를 점진적 향상 . 조금 더 명확히하고 싶습니다.

모바일 우선 관점에서 호버 상태는 실제로 어떠한 목적도 제공하지 않습니다. 따라서 UI는 호버 상태가없는 클릭 가능한 개체에 대해 클릭 가능한 동작을 더 잘 감당할 수 있습니다 (즉, 버튼이

휴대 기기에서이 개념을 지원할 수 있다면, 마우스 오버 상태가 도입되기 전 일지라도 동일한 개념이 데스크톱 / 노트북 기기에서도 지원 될 것입니다.

노트북, 데스크톱 등 마우스 오버를 지원하는 기기에 마우스 오버 상태를 포함하면 특정 UI 요소를 실제로 클릭 할 수 있다는 사용자의 기존 인식을 확인할 수 있습니다.

요약 :

1. 모든 기기에서 클릭 가능한 동작을 제공하도록 클릭 가능한 UI 요소를 빌드합니다.
2. 마우스 오버를 지원하는 기기에서 마우스 오버 상태를 사용합니다. 요소를 클릭 할 수 있다는 개념을 추가로 지원합니다.

점진적 향상을 언급 한 Sam에게 +1.

UI를 향상시키는 유용성을 제공하는 경우 마우스 오버 상태를 사용하는 것이 좋지만 작업을 완료하기 위해 필요 해서는 안됩니다.

예를 들어 제품 목록 페이지에서이를 사용하여 사용자가 탐색하기 전에 이미지 위로 마우스를 가져갈 때 항목에 대한 약간의 정보를 제공합니다. 그러면 해당 정보는 제품 페이지 자체에서도 사용할 수 있습니다. 손상시키지 않습니다 터치 스크린 사용자의 경험을 제공하지만, 를 보는 사용자에게 몇 가지 추가적인 유용성을 추가합니다. 🙂

“데스크톱과 모바일 모두를 위해 디자인하고”있다고해서 디자인이 같은. 모바일 사용자에게 익숙한 상호 작용은 데스크톱 사용자에게는 분명하지 않을 수 있습니다.

예 : 오른쪽에 캐럿이있는 흰색 카드. 모바일 사용자에게 이것은 분명히 탭할 수있는 것입니다. 데스크톱 사용자에게는 그다지 많지는 않지만 (특히 카드가 데스크톱에서 더 넓은 경우) 마우스를 가져 가서 마우스 오버 상태를 보면 갑자기 클릭 할 수 있다는 것이 분명해집니다.

특히 이제는 해당 애니메이션 호버 상태는 사용자가 “의도 한 일을하고 있다는 피드백을주는 기본 애니메이션입니다.

데스크톱에 호버 상태를 사용하지 않는 것은 게으르고 사람들을 슬프게합니다.

:hover 상태가 필수적이라고 생각하지 않습니다. 데스크톱의 UI 요소는 이러한 요소없이 영원히 대처 해 왔으며 클릭을 감당할 수 있도록 명확하게 설계된 개체 (예 : UX.SE의 “Post Your Answer”버튼)는 내 경험에서 잘 테스트됩니다. 도움이되지 않는다 는 말은 아닙니다. 필수는 아닙니다.

그렇지만 :focus, 특히 :active 상태는 필수입니다. 후자는 특히 너무 많은 사이트에서 무시되는 것으로 보입니다. 명확한 활성 상태는 사용자가 버튼 클릭이 즉시 등록되었음을 알리는 데 도움이됩니다 ( 사용자가 UI에서 개체를 직접 조작하고 있습니다 ). 버튼 및 메뉴와 같은 시스템 컨트롤도 모두 해당 상태를 예상 한 상태로 만들었 기 때문에이를 잊어 버리는 것이 더욱 용서할 수 없게되었습니다.

호버 상태는 문제의 요소가 상호 작용 적이라는 사용자의 기대에 긍정적 인 피드백을 제공하여 더 부정적인 의심과 모호함의 가능성을 제거 할 것을 제안합니다. .

디자인은 모양, 크기, 위치, 색상, 밑줄 등 요소가 상호 작용한다는 여러 단서를 제공합니다. 사용자마다 다른 단서를 필요로합니다. s, 그리고 아마도 다른 수의 단서의 누적 효과는 요소가 상호 작용 적이라는 것을인지 (그리고 확신을 느끼게합니다). 마우스 오버시 요소를 변경하면 더 많은 단서를 전달할 수 있습니다.

대부분의 (모두는 아니지만) 브라우저는 커서를 포인터로 변경하여 기본적으로 호버시 큐를 제공합니다. 물론 우리는 이것을 제어 할 수 있으며이 효과를 제거하여 호버 상태를 제거 할 수 있습니다. 그러나 나는 우리 대부분에게 이것이 우리의 브라우징 경험에 중대한 의심을 불러 일으킬 것이라고 생각합니다. 브라우저 (그리고 디자이너)는 호버링시 추가 신호에 대한 선례를 설정하여 신호를 전달하지 않는 것은 요소가 상호 작용한다는 이전에 인식 된 신호와 상당한 모순이 될 수 있습니다.

브라우저의 기본값 제거 따라서 cue는 호버 상태의 가치에 대한 유용한 예입니다. 따라서 질문은 호버링시 상호 작용의 시각적 단서가 가치가 있는지 여부가 아니라 어떤 단서가 얼마나 많은지 최적인지가됩니다.

유용하고 친숙한 선례이지만이 질문에 대한 답은 응용 프로그램과 대상 고객에 따라 다릅니다.

제안하겠습니다. 버튼에 아이콘이 없을 때 마우스를 올리세요. 버튼에 화려한 아이콘이 있다고 가정하면 버튼에 마우스 오버 상태를 부여 할 필요가 없습니다. 예 : Google 버튼을 사용하여 가입하십시오.

마우스 오버는 온라인에서 좋은 응답을 원하는 모든 웹 사이트에 필수입니다. 내 노트북에서 호버 상태를 버리고 매우 실망 스러웠습니다.좋은 디자이너라면 누구나 온라인 사람들이 원하는 것을 찾기 위해 서두르고 있다는 것을 알고 있습니다. 버튼이 버튼인지 아닌지 알려주지 않고 새 탭에서 열어야하는 경우 확인하세요. 실패!

맞습니다. 모바일에서는 호버링이 필요하지 않습니다. 그러나 모바일에서는 언제든지 비활성화 할 수 있습니다. 게다가, 모바일 용 버튼은 온라인 용 버튼보다 훨씬 더 커야한다는 사실을 잊지 말자. 그리고 두 개의 다른 스타일 시트에서 만들어지지 않았는가?

댓글

• 커서 스타일을 손 (또는 이에 상응하는)으로 전환하는 웹 사이트의 경우 호버 효과가 적용됩니다.
• 나는 여전히 마우스 오버를 표시해야한다고 생각합니다. 웹이 가능한 한 실물처럼 작동하기를 원하기 때문에 손 하나만 있으면 사용자를 혼란스럽게하고, 실생활에서 사물을 클릭하면 반영됩니다. 또한 전략가의 관점에서 ‘ 웹 사이트가 더 안전하다고 느끼고 ‘ 사기 웹 사이트는 ‘ 호버 효과를 설치하지 않습니다. 따라서 사용자가 ‘ 내부에서 이상하게 느껴지는 효과를 보지 못합니다.