플로터 구매 및 임대 추천 가이드

개요

플로터는 대중적이지 않는 제품이다. 사용자 입장에서는 그저 복합기 이상의 용지를 출력할 수 있는 대형 잉크젯 프린터라는 개념만 가지고 있을 뿐 제품을 판매나 임대하는 본사에 입장에서는 내용으로 설명하기에는 제품의 특성이 다양하다. 일단 플로터를 어려워하는 모델들의 특성을 좀 더 쉽게 구분하여 사용자가 직접 업무에 특성을 고려해 선택에 폭을 좀 더 세밀하게 적용하여 필터형식이 아닌 스텝 바이 스텝형식으로 플로터 모델을 추천하는 페이지가 필요했다.

구성

위와 같이 필터를 적용하는 일반적인 제품 리스트 페이지에는 본 페이지의 의도와 맞지 않음. 필터 리스트가 주 목적으로 처음 사용하는 사용자도 제품 특성에 맞게 선택하게 맞게끔 간단한 필터 양식이 필요함.

• 제품 리스트는 데이터베이스 서버 구축 전 작업이라 js파일로 리스트 작업
  • TODO: 데이터베이스를 통한 제품 리스트 불러오는 작업
• 기본은 mixitup을 이용한 제품의 필터링 구현이 필요. MixItUp jQuery Plugin으로 해결.
• 전체화면 폼으로 사용자가 필터를 선택할 수 있게끔 작업.

디자인

전체 화면 양식(Form) 인터페이스를 통한 양식 필드 간 이동 시 사용자의 집중을 방해하지 않고 양식을 작성하게 하며, 필터적용을 단계별 구현으로 적용하여 제품 리스트의 선택의 폭을 좁혀주는 작업으로 진행.

폼 디자인

<form>양식의 <input type="radio">버튼 통한 선택을 적용. 전체화면에 하나의 타입을 선택하게 하여 사용자의 제품의 니즈정보를 선택하게끔 받는다.

컨펌 디자인

모든 필드 작성이 완료되거나 다음 단계로 이동하면, 마지막 단계에서 작성된 내용의 요약을 표시. 여기에서 입력 데이터를 검토하고 수정할 수 있으며, 이 최종 단계에서 제품 리스트 필터링을 시작.

리스트 디자인

폼에 적용된 내용을 기반으로 최적의 조건의 맞는 제품 리스트를 표시. 다시설정 버튼을 통해 변경이 가능하며 제품 리스트에는 쇼핑몰로 이동하는 링크를 걸어 제품에 상세 유입을 적용

반응형 디자인

관련링크

• cordrops
• MixItUp jQuery Plugin