AEM Component : Bottom Description

AEM Dialog 사용성 개선 사례

AEM(Adobe Experience Manager)의 Touch-UI Dialog에서 툴팁으로 제공되는 입력 필드의 설명을 다른 방식으로 제공하는 방법을 소개합니다.

AEM이 5.6.1 버전부터 터치 디바이스를 지원하면서 콘텐츠 제작 UI가 변경되었습니다. (6.5버전이 나온 현재, Classic-UI와 Touch-UI를 혼용 중이지만 Adobe에서 Touch-UI 사용을 권장하고 있습니다)

UI가 변경되면서 기존 Dialog에서 볼 수 있던 Description이 툴팁으로 변경되었습니다.

Classic-UI의 Dialog

Touch-UI의 Dialog

위와 같이 변경되면서 사용자가 Dialog에서 값 입력 시 유의해야 할 사항이 있더라도 툴팁 아이콘 위에 마우스 포인터를 위치시키거나 클릭하기 전에는 해당 내용을 확인할 수 없게 되었습니다.

그래서 1) 기존 사용자의 사용성 유지, 2) Dialog 사용성 개선을 목적으로 Dialog의 모든 입력 필드 아래 영역에 Description을 삽입할 수 있도록 기능 패치를 진행했습니다.

그 결과…

Touch-UI Dialog에 Bottom Description이 적용된 모습

Classic-UI에서 확인할 수 있었던 Description을 그대로 재현하여 기존 사용성을 유지하며 사용자가 각 입력 필드에 대한 설명 또는 유의사항을 쉽게 확인할 수 있게 되었습니다.

코드 참고 링크: http://bit.ly/2PJgWdO