Figma Clone
오설록 메인페이지 클론
https://www.figma.com/proto/Txn54d7jEYkJpmDOcVRzV2/Untitled?page-id=0%3A1&node-id=56%3A46
UI 분석
사용중인 UI 디자인 패턴
모달 탭 자동완성 캐러셀 페이지네이션 GNB 등의 디자인패턴을 사용해서 편의성을 높힘
컬럼 그리드 시스템 사용 여부
컬럼 그리드 사용중
UX 분석
피터 모빌의 UX 7요소 충족 여부
1. 유용성 - 9점
서비스 목적에 맞게 구매로 이어지도록 첫화면에서 베스트 상품을 소개하고 있으며, 브랜드 홍보 또한 적절하게 이루어 지고 있다.
2. 사용성 8점
추전 제품을 단순하게 보여주고 있으며 페이지 하단으로 갈 수록 브랜드 홍보나 이벤트 또한 잘 보여주고 있다.
3. 매력성 8점
파스텔톤으로 통일되어 매력적이고 차를 판매하는 브랜드 특성의 따스함이 느껴지는 디자인이다.
4. 신뢰성 8점
브랜드의 아이덴티티를 보여주어서 상품에 대한 믿음을 줄 수 있도록 디자인되어있다.
5. 접근성 6점
외국인을 위한 언어 선택 기능은 있으나 확대기능, 안내 기능이 부족하여 접근성이 떨어진다.
6. 검색 가능성 6점
연관검색어 및 자동완성 검색어 서비스가 부족하고 첫 화면에 슬라이딩 컨텐츠가 많아 정보를 쉽게 찾기 힘들다.
7. 가치성 7점
브랜드 홍보와 자사 제품 판매페이지가 적절히 어우러지며 브랜드 아이덴티티가 잘보여지는 좋은 디자인이라고 생각된다,
사용성 평가
제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부
1. 시스템 상태의 가시성 (Visibility of system status)****
캐러샐에 마우스 호버 기능을 통해서 즉각적인 피드백을 주고 있다.
2. 시스템과 현실 세계의 일치 (Match between system and the real world)****
사용자와 상호작용이 가능한 다양한 체험페이지를 구현해 두어서 간접적 체험이 가능하게 만들었다.
3. 사용자 제어 및 자유 (User control and freedom)****
선택창에 모달을 통해서 사용자에게 다시 한번 확인하도록 하고있다.
4. 일관성 및 표준 (Consistency and standards)****
전체적으로 익숙한 UI를 사용하여 만들어졌고 , 일관성이 있으나 새로만든 페이지와 기존 페이지에 차이가 느껴진다.
5. 오류 방지 (Error prevention)****
모달창으로 사용자에게 확인을 요구해서 오류를 줄이도록 하고 있다.
6. 기억보다는 직관 (Recognition rather than recall)****
최근 검색어 기능이 구현되어 있다.
7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)****
직관적인 아이콘과 키워드로 구성되어 쉽게 사용할 수 있다.
8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)****
불필요한 정보 없이 기능을 충실하게 제공하고 있다.
9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)****
10. 도움말 및 설명 문서 (Help and documentation)****
도움말과 문의 등 사용자 편의를 위한 기능이 제공되고 있다.
