이 4곳의 쇼핑몰은 고도몰 솔루션으로 운영중이라는 공통점이 있는데 각 몰의 간편주문 기능을 면밀히 살펴보면 다소 아쉬운 요소들이 보여집니다.

이 4곳에 개발된 간편주문 기능의 개선점을 찾아보고 더욱 더 편리하고 강력한 기능을 갖춘 간편주문 기능을 고도몰 튜닝하였습니다.

- OO커피의 새로운 간편주문 페이지를 소개드립니다.

1. 최신 웹 트렌드에 맞추어 화면 디자인과 레이아웃을 설계하였습니다. 웹 페이지의 가로 크기를 1500px 로 늘려 쾌적하고 편리하게 정보를 살펴 볼 수 있습니다. 

2. 혹시 발생할 화면의 새로고침(F5) 키보드 동작을 차단하여 담은 원두 정보가 사라지지 않도록 하고 별도의 새로고침 버튼을 통해 웹 페이지가 새로고침 되지 않고 차트를 실시간으로 업데이트 하도록 하였습니다.

3. 20KG, 5KG, 1KG 각 중량별로 증가, 감소 화살표 버튼을 제공하여 동일 중량의 제품들을 한꺼번에 담을 수 있으며 키보드의 SHIFT 키를 누르고 클릭하면 10개 단위로 수량이 증가,감소됩니다.

뿐만아니라 개별 중량 입력박스에서도 마찬가지로 SHIFT 키를 누르고 클릭하면 10개씩 수량이 증가,감소됩니다. 

수량 감소가 지속되면 0개 이하부터 초기화되며 입력박스에 어떤 값을 입력하면 X 버튼이 추가로 생성되는데 이 버튼을 클릭해도 수량이 0 으로 초기화 됩니다. 

키보드의 ESC 버튼을 눌러서도 수량이 초기화 되며 중량별 업,다운 일괄 버튼에서도 ESC 기능이 동일하게 동작합니다.

5. 하단에 고정된 옵션창은 생두의 중량 정보와 합계 금액을 보여주며 검색을 통해 새로운 제품 리스트가 화면에 반영되더라도 담아놓은 제품 리스트는 삭제되지 않고 항상 유지됩니다.

6. 옵션창에 있는 초기화 버튼을 누르면 옵션창의 모든 제품 리스트를 한꺼번에 삭제시킬 수 있습니다.

7. 간편주문 페이지에 처음으로 진입하고 어떤 제품의 수량을 최초 1로 증가시켰을 때 하단의 옵션창이 자동으로 튀어올라 펼쳐집니다. 

이후 사용자가 옵션창을 다시 접어 놓으면 옵션창은 접힌 상태를 유지하며 이후 다른 제품의 수량을 증가시키더라도 옵션창은 펼쳐지지 않고 접힌 상태를 유지합니다.

옵션창의 계속 접혀있다고 하더라도 생두중량과 총 주문 금액은 화면 맨 하단 좌측에 노출되어 사용자에게 지속해서 보여집니다.

8. 상품별로 섬네일 이미지를 추가하여 이미지 클릭시 모달 레이어 팝업창으로 상세 설명의 내용이 화면 중앙에 보여지며, 제품명에 마우스를 올리면 새 창 아이콘을 표시하여 사용자에게 다음 동작을 예상하도록 해주어 기능 편의성 또한 제공합니다.

9. 각 중량은 고도몰의 옵션 기능을 이용하여 재고 및 옵션 상품으로 취급되어 관리됩니다.

고도몰 튜닝 : 간편 주문서 기능 ( 제작 및 제공 : 개발놀이터 ) 

간편주문 화면 카테고리별 제품 리스트 

해시태그 클릭 및 키워드 검색시 화면 ( 상품명, 생산국, 등급, 가공방식을 검색어로 찾습니다. )

섬네일 클릭시 상품 상세 페이지에 상세 설명 정보가 화면 중앙에 레이어 팝업 형태로 보여집니다.

 

제품명에 마우스 커서를 올리면 화면 이동을 표시하는 아이콘을 보여주어 사용자에게 다음 동작을 안내합니다. 클릭시 제품 상세 페이지로 이동합니다.

키워드 목록들은 고도몰 관리자 페이지 [검색창 관련 설정] 의 [인기 검색어] 에 연동하여 유지 관리 편의성을 제공합니다.

단가표 인쇄 버튼 클릭시 보여지는 새 창은 블랙&화이트 톤으로 최대한 단조롭게 구성하여 인쇄시 원두 내용을 직관적으로 알아 볼 수 있도록 하였습니다.

카테고리 및 상품 정보는 고도몰의 카테고리 관리에 연동하여 그 진열 순서와 제품 진열 순서가 연동되어 관리자에 유지관리 편의성을 제공합니다.

간편주문서 단가표 게시판을 생성하고 이 것을 연동하여 첨부파일 기능을 이용해 최신의 단가표 정보를 관리자가 언제든지 업데이트 할 수 있습니다.

참고 쇼핑몰 1. 엠아이커피 (고도몰)

- 60KG, 20KG.. 등 단위별로 수량을 한꺼번에 조정하는 기능은 제공되지 않습니다.

- 우측에 위치한 퀵 메뉴인 생두주문서는 전반적으로 크기가 작아 단 2개의 제품만 담아도 세로 스크롤이 발생하며 제품명 또한 줄바꿈되는 등 인터페이스에서 아쉬운 모습입니다.

- 간편주문 내의 검색기를 이용해 키워드를 검색하면 페이지가 새로고침 되버리는데 이 때 우측 퀵 메뉴인 생두주문서에 담은 제품들이 모두 삭제되어 버립니다.

- 페이지의 가로 크기가 1280px 정도로 넓지 않아 정보가 비좁게 배치되어 있어 사용자가 한눈에 다양한 제품 정보를 살펴보기에는 불편합니다.

- 제품별로 섬네일이 없으며, 제품명을 클릭할 경우 다소 옛날 방식인 윈도우 팝업창으로 보여주어 불편함이 예상됩니다.

- 각 제품의 중량별로 수량 조절을 할 수 없도록 되어 있으며, 하단의 옵션창을 통해서만 수량 조절이 가능한데 이는 불편함이 야기됩니다.

- 상품 섬네일이 존재하지 않으며 , 상품명을 클릭할 경우 해당 상품의 상세 페이지로 새 창을 통해 이동합니다. 그러나 사용자에게 마우스 클릭시에 대한 다음 동작을 예측을 할 수 없기에 UI에서 아쉬운 모습입니다.

- 페이지 내에 검색기능을 제공하고 있지 않아 원하는 제품을 쉽게 찾을 수가 없습니다.

- 패키지선택을 클릭하여 선택할 때마다 하단의 옵션창이 튀어올라와 화면을 가리며, 제품을 선택할때마다 해당 영역이 튀어 올라와 불편합니다.

- 중량별로 수량을 일괄적으로 업/다운 하는 기능이 제공되고 있지 않으며 10개 단위로 수량을 증가시키는 기능이 없어 10개를 증가시키기 10번을 클릭해야 하는 번거로움이 있으며 중량별로 일일이 수량 버튼을 클릭하여야 합니다.

- 간편주문 내 상품 검색기는 이전 참조 사이트들에서 새로고침이 되는 개선사항을 반영한듯 키워드 검색시 우측 퀵메뉴의 생두 주문서에 있는 제품 리스트가 삭제되지 않고 유지됩니다.

- 중량별 제품 구성이 고도몰에서 제공하는 옵션으로 구성되어 있지 않고 단순 텍스트 형태로 제작되어 있어 고객의 주문 이후 교환이나 환불 요청시 재고 관리에서 큰 문제가 예상되며 고도몰의 기본 옵션체계를 사용하지 않아 관리 운영에 큰 불편함이 예상됩니다. 

참고 쇼핑몰 4. 더드립몰 (고도몰)

- 중량별로 제품 수량을 일괄 선택하는 기능이 없으며 중량 선택 전에 제품의 기준 단가를 드랍다운 메뉴로 선택하다보니 쉽게 확인할 수 없는 불편함이 있습니다. 

- 해당 샵은 제품 이미지 섬네일을 제공하는데 클릭시 레이어 팝업으로 상세 정보를 보여주며 이전의 쇼핑몰들과 다른 개선된 모습을 보여줍니다.

- 좌측의 다양한 필터링을 통해 제품 분류가 업데이트 되는데, 이 때 화면이 새로고침 되지 않아 옵션창에 담아놓은 제품 리스트가 삭제되지 않아 개선된 모습을 보여줍니다.

그러나 중요한 검색바 기능을 제공하지 않아 키워드를 통한 상세한 제품 검색이 불가능해 불편함이 예상됩니다.

- 하단의 주문 내역 옵션창을 통해서만 제품의 수량을 조절 할 수 있어 화면에서 수량을 조절하는 것에서 불편함이 예상됩니다.