28P by xguru 2달전 | favorite | 댓글 8개
  • McMaster-Carr 는 산업용 부품 공급 회사로 너트,볼트,베어링 등을 판매함
  • 어떻게 이런 산업용 사이트가 최고의 쇼핑몰 사이트가 되었을까 ? 딱 필요한 것만 하기 때문
  • 미니멀한 디자인, 대부분 그레이스케일에 녹색과 노란색으로 살짝 강조
  • 팝업, 애니메이션, 배너, 캐러셀, 비디오 이런건 전혀 없음
  • 사이트에 방문한 사용자의 목표는 원하는 부품을 최대한 빨리 찾는 것. 이 사이트는 전적으로 이걸 위해 설계됨
    • 브라우징하러 오는 곳이 아니기 때문에 AI 추천 알고리듬도 없고, 피쳐링한 제품도 없고, 신제품 소개도 없음
  • "볼트"를 찾는다고 가정해 보면
    • 검색창에 bolt 입력
    • McMaster는 몇개의 서브 카테고리를 보여줌. 형태에 따른 hex head, socket head, set screws 같은 것들. Socket Head를 선택
    • 왼쪽 네비게이션바를 보면, 몇개의 필터링 옵션을 보여줌. 볼트들은 보통 나사산 크기(Thread Size)와 길이로 분류됨. 나는 1/4"-20 x 1" 볼트를 찾는 중(볼트의 지름이 1/4" 이고 길이가 1" 이라는 것)
    • 그외에 다른 필터들도 있음. 재료/강도/헤드크기 등. 필터를 선택하고 나면 메인 검색 창은 각각 아이템을 바로 보여줌(서브카테고리가 아닌)
  • McMaster의 검색 인터페이스는 정말 훌륭. 이 페이지의 모든 기능은 원하는 부품을 가장 빠르게 찾을 수 있도록 디자인 됨
    • 필터 섹션은 간단하고 우아하며, 필요한 경우 구조를 설명하는 일러스트레이션을 보여줌
    • 일러스트레이션들은 관련 정보만을 보여주기위해 간소화 되어있어서 검색시에 산만하지 않게 해줌
  • 결과 페이지도 도움이 되는 드롭다운을 제공해서 찾고 있는 파트에 대해 설명을 해줌.
    • 엔지니어의 핸드북과 카탈로그를 하나로 합친 것과 비슷.
    • 엔지니어들은 종종 이런 용어를 바로 검색하기도 해서, 이런 정보를 포함함으로써 귀중한 시간을 절약해줌
  • McMaster의 필터는 타켓 검색에만 유용한게 아니라, 내가 뭘 원하는지를 결정할때도 도움이 됨
    • 가끔 난 내가 원하는 부속에 대한 일반적인 아이디어만 가지고 검색을 하는데, 이럴때 서브카테고리 설명을 통해서 세부사항을 결정하기도 함
    • 예를 들어, 내가 "Lock Washer(풀림방지용 와셔)" 필요하다는 것은 알지만, 어떤 것이 적합할지 모를 때, 이미지와 설명을 통해 결정할 수 있음
  • McMaster는 판매하는 모든 것들이 사양으로 정의되어 있기 때문에 직관적인 검색이 제공 가능
    • 브랜드, 제품 사진이나 마케팅에 사용하는 것들이 전혀 없음
    • 하지만 Grainger, DigiKey, Home Depot 같은 사이트보다 훨씬 좋은 기능을 제공
  • 비교해보면, 아마존은 아이템 필터링을 정말 못함.
    • 물론 아마존은 훨씬 더 많은 제품들이 있어서 작업을 어렵게 만들긴 하지만..가격같은 기본 검색 기능부터 정말 별로임
    • 아마존의 가격 선택창은 두개의 텍스트 박스임. 그냥 슬라이더면 안되나 ?
    • 게다가 제품에 상관없이 가격 선택 옵션들이 모두 같음. 가격이 아주 싼 펜을 검색하나 비싼 트램폴린을 검색하나 다 마찬가지
  • McMaster 의 장점중 하나는 거의 모든 부품에 대해서 CAD 파일을 제공하여 다운로드해서 내 3D 모델에 추가 가능하다는 것
    • McMaster는 유명 CAD 프로그램용 확장도 제공해서 파일을 직접 임포트도 가능해서,
      엔지니어의 삶을 10x 이상 편하게 해줌(물론 McMaster에서 구매도 많이 일어남)
  • McMaster - https://www.mcmaster.com/ 은 거의 완벽함. 검색표시줄을 조금 더 눈에 띄게 해주면 좋긴 하겠지만..
  • McMaster는 "사용자를 이해하는 서비스"

설계에 대한 데이터를 상세하게 제공하는 것도 한 몫 합니다.
일반쇼핑몰은 제품 상세 페이지에서 조차 원하는 정보를 얻을 수 없는 경우가 많죠

필요할 것 같은 분께 링크를 공유해드리니, 수십년 된 곳이라고 하네요. 20년 전에는 전화번호부 2배 두께로 발간 카탈로그 책자를 만들었다고 합니다..!

모바일웹은 아예 지원을 안하고 앱다운로드로 연결시키는것도 신선하네요

어랏? 저는 아이폰에서 들어가니 앱 클립에서 열기 라고 나오고 누르니까 앱 설치 절차 없이 앱 클립이 실행되었어요! wwdc 영상으로만 보고 실제 앱 클립 경험은 처음인데 넘 자연스럽게 넘어가네요

헛 저는 이미 설치되어있어서 몰랐는데, 그것도 구현해 놨나 보네요.

모바일앱도 꽤 잘 만들었습니다. 그냥 돌아다니는 재미가 있어요 ㅎㅎ

도메인에 특화된 쇼핑몰을 만들 때 참고하기 좋은 레퍼런스네요

카테고리가 저렇게나 많은데, 깔끔하며 군더더기 없고, 쓸데없이 리소스 차지하는 자원이 없네요.
차분하고 동일한 톤의 일러스트들도 보기 편하고, "그거 이름 뭐더라" 시에도 유용해보이는 UX입니다.
기본에 충실한 느낌 ㅎㅎ