4월의 4가지 Short Frontend 팁

화살표 키를 사용하여 목록 옵션 간 전환

여러분, 키보드 화살표 키를 사용하고 싶습니까? 🤔

나는 절대적으로 예! 그것은 내 인생을 더 쉽게 만들었습니다. 그래서 허용하지 않는 앱을 ​​사용하면 화가 납니다 😤

제가 Preply를 사용할 때 일어난 일입니다. 아... 방금 언어 선택을 위해 필터를 클릭하고 아래쪽 화살표 키를 눌렀습니다. 무슨 일이 있었던 것 같나요?

아무것도... 0 반응! 🤦‍♂️열쇠를 사용할 수 없어요. 마우스 가져가서 써봐야지 😒



어떻게 만들 수 있는지. NHL 웹앱에서 봅시다. 모든 팀 필터를 클릭하고 아래쪽 화살표 키를 누릅니다...

앱이 Anaheim Ducks 팀으로 전환됩니다! 🤩 그리고 한 번 더 누르면 다음 팀인 Arizona Coyotes로 전환됩니다. 모두! 노아 마우스. 우리는 키보드를 사용합니다 🥳

역할="버튼"은 사용자 친화적인 UI에 충분하지 않습니다.

UI와 상호 작용하는 단일 방법으로 키보드를 사용해야 하는 사람들을 위해 버튼을 개선하는 방법에 대해 생각해 봅시다🤔

스크린 리더를 사용하는 사람들이 많은 앱에 더 쉽게 액세스할 수 있습니다. 굉장하다! 그런데 뭔가 잘못되었습니다.. 😐 버튼이 아닌 버튼, 즉 사용하지 않는 버튼을 마주하게 되었고 대신 역할="버튼"이 사용되었습니다. 왜 나쁜가요?

사람들이 UI와 상호작용할 확률은 0%입니다. 🆘 그들은 인터페이스를 전혀 사용할 수 없습니다 😩

역할은 단추의 상호 작용에 영향을 주지 않습니다. 이것이 사람들이 키보드를 사용하여 이러한 버튼과 상호 작용할 수 없는 이유입니다. 따라서 버튼이 을(를) 사용하여 생성되었는지 확인하십시오. 사람들이 당신의 UI를 사용할 기회를 주세요 🙏

이러지 마

<div role="button">Go</div>

대신 이것을 사용할 수 있습니다

<button>Go</button>

첫 번째 텍스트 필드로 초점을 옮기는 것이 완벽한 UX 해킹입니다.

오프닝 모달을 디자인할 때 포커스로 무엇을 하나요? 🤔

두 가지 솔루션이 있습니다. 첫 번째는 아무것도 만들지 않는 것입니다. 예를 들어 Groupon에서 수행되는 방식입니다.

로그인 버튼을 누르면 승인 양식이 열립니다. 하지만! 포커스가 이동하지 않기 때문에 입력을 시작하려면 필드 입력을 클릭해야 합니다 😒 그냥 입력할 수 없습니다 🤦‍♂️



나는 당신이 이것을 만들고 싶지 않기를 바랍니다 ☝️ 당신을 위해 다른 접근 방식이 있습니다. Pinterest를 열어주세요.

로그인 버튼을 누르면 승인 양식이 열립니다. 그리고 초점은 첫 번째 필드 입력으로 이동합니다! 이 경우 사용자는 추가 작업 없이 양식 작성을 시작할 수 있습니다. 그냥 입력하고 모두 🥳

쿠키 정책을 수용하는 UX를 개선하기 위한 초점 설정 방법

사용자가 웹사이트에서 쿠키 정책을 수락해야 하는 일반적인 패턴이 있습니다. 가장 좋은 방법을 알아봅시다☝️

일반적인 솔루션은 Fred Perry 웹 사이트에 있습니다. 사용자는 쿠키 정책에 대한 링크와 수락 버튼이 있는 텍스트를 볼 수 있습니다.



이러한 종류의 솔루션을 사용할 때 링크나 버튼을 누르기 위해 마우스, 터치패드 또는 기타 장치를 사용해야 합니다. 그래서 우리는 더 많은 행동을 합니다😒

또한 H&M 웹사이트에는 또 다른 솔루션이 있습니다. 그들은 쿠키 정책 링크에 초점을 맞춥니다.



이 솔루션의 장점은 Enter 키만 누르면 사용자가 정책을 참조할 수 있다는 것입니다. 정책을 수락하려는 경우 Tab 키와 Enter 키를 누릅니다. 마우스를 손에 쥐거나 터치패드를 사용할 필요가 없습니다 🥳

이 솔루션의 문제는 많은 사용자가 이미 정책을 읽고 다시 읽고 싶지 않다는 것입니다. 그들은 단지 그것을 받아들이고 싶어합니다 😐

수락 버튼에 초점을 맞추는 것이 좋습니다. 이 경우 Enter 버튼을 사용하여 신속하게 수락합니다.



정책을 읽어야 하는 경우 shift+tab 조합을 사용하여 링크를 켠 다음 Enter 키를 눌러 정책 읽기로 이동합니다 🙂

추신
❤ 후원자 여러분, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis, Spiridon Konofaos에게 정말 감사합니다.

💪 더 많은 무료 팁을 받으세요 directly to your inbox