개시하다

저번의 글에서 사용자 로그인 편은 기쁘고 축하할 만하게 완성되었지만, 나는 테스트가 있다는 것을 안다.
에이, 탭 사용 시 이동 순서가 바뀐 거 아니야??
이용자 로그인 페이지는 이런 느낌이에요. 물론 위에서 순서대로 [이름]→[메일 주소]→[생년월일]을 이동하고 싶어요.

하지만 제 환경에서는 탭을 움직이면 [이름]→[비밀번호]→[비밀번호(확인용)] 순으로 탭을 이동하는데 이미 큰일 났어요.
아뇨, 아뇨, 이메일 주소 같은 건 날리지 않았으면 좋겠어요.
이번에는 이런 간단한 결함을 플러그인으로 해결하자.

FixTab Order 사용

FixTab Order 플러그인을 사용합니다.
플러그인 상세 정보여기..
무료로 사용할 수 있는 플러그인입니다.

먼저 설치

왼쪽 창에서 Plugins 화면을 열고 오른쪽 위에 있는 Add plugens 를 클릭합니다.

FixTab Order를 찾아 Install 버튼을 클릭한 다음 DONE 버튼을 클릭합니다.

설치가 완료되었습니다.
Fix Tab Order가 Installed Plugins에 표시되면 제대로 설치할 수 있습니다.

페이지에서 요소로 정렬

Random Number Generatr를 가져올 때와 마찬가지로 Bubble의 플러그인은 요소로 페이지에 설정된 후에야 작동합니다.
Design 화면으로 이동해 Visual elements를 확인하면'탭 픽스'가 추가된 것을 확인할 수 있습니다.

이 "Tab Fix"요소는 user입니다.registration 페이지에 추가합니다.
평소처럼 끌어놓다.

이제 가져오기가 완료되었습니다.
프리뷰를 해보면 탭 이동을 확인할 수 있는 느낌이 좋다.

기본 설정

탭 픽스의 설정 창을 보면'Include Date Inputs'와'Include Radio Butons'가 선택되지 않았음을 알 수 있습니다.
이렇게 되면 [생년월일]과 [가입계획]은 탭 이동에서 생략됩니다.
하지만 그래도 괜찮을 것 같아요.
기본적으로 Date Inputs와 Radio Butttons는 마우스 조작으로 입력되기 때문에 탭 이동 중 선택해도 좋을 게 없다.
그래서 여기다 기본 설정으로 놓으면 될 것 같아요.

끝맺다

이번에 발견한 결함은 비록 매우 소박하지만 나는 충격이 매우 크다고 생각한다.
항목이 많은 페이지를 입력하면 어떻게든 탭 이동을 사용하기 쉽기 때문에 사용자에게 스트레스를 주면 가입자는 끝난다.
Tab 이동의 순서와 예상이 다르면 반드시 FixTab Order를 사용하십시오.