상당히 편리한 jQuery 플러그인을 하나 찾았다.

보통 이런 블로그가 아닌 복잡한 웹어플리케이션 예를들면 메일, 캘린더, 금융관련, 쇼핑몰 같은 사이트에서는 사용자가 사용법을 알고 싶어도 따로 도움말 페이지를 들어가 보거나 지시하는 순서를 하나 하나 읽어 가면서 알아내야만 했다.

요즘에는 그나마 이런 안내 방식이 개선되어 나가는 모습이 보이기는 하지만
페이지를 만들어 내기도 벅찬데 언제 인터렉티브한 도움말까지?? 하는 것이 현실이었다.

하지만 아래에서 소개하는 Embedded Help System 이란 jQuery 플러그인은 이러한 고민해결에 많은 도움이 될 듯 하다.

일단 이 플러그인이의 데모페이지에서 들어가 확인할 수 있는 기능은 다음과 같다.

화살표가 진행해야 할 순서를 에니메이션으로 알려준다.
화살표가 진행해야 할 순서를 에니메이션으로 알려준다.

위의 화면은 왼쪽의 Generate Full database report란 링크를 클릭했을 때 나타나는 것으로 조작순서를 화살표가 움직여가면서 하나하나 알려준다. 화살표의 움직임을 따라가는 것만으로도 페이지 사용법에 대한 개념을 잡기에는 충분하며 잠깐씩 멈추면서 해당 단계에 대한 설명도 풍선도움말로 표시된다.(화살표의 움직임에 Easing을 거는 옵션까지는 아직 없는 듯)

또한 이렇게 움직임을 따라가는 것보다 간단하게 아래의 이미지처럼 순서만을 간단히 표시하게 할 수도 있다.

진행순서만을 번호로 표시
진행순서만을 번호로 표시

물론 이렇게 번호만 표시되었다고 할 지라도 해당 번호에 마우스 커서를 올리면 역시 어떠한 단계인지에 대한 설명이 표시되게 셋팅할 수 있다.

요즘 부모님이 나이들어가시면서 웹사이트 사용방법을 반복적으로 알려드리곤 했는데
이런 플러그인을 활용하여 이런 환경이 익숙치 않은 많은 사람들이 보다 편리하게 웹을 이용하게 되었으면 싶다.

이 글의 관련글

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *