S3 U2 - 과제2 UI/UX 분석 및 개선

과제: 아이디어스 홈페이지를 분석해봄.

• UI 분석
  • 사용중인 UI 디자인 패턴
  • 컬럼 그리드 시스템 사용 여부
• UX 분석
  • 피터 모빌의 UX 7요소 충족 여부
  • User flow 그려보기
• 사용성 평가
  • 제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부

UI분석

1. 사용중인 UI 디자인 패턴

• 모달 (Modal) : 모바일 화면시 상단의 카테고리 방향키 클릭시 나옴
• 자동완성 (Autocomplete) : 상단의 검색창 클릭후 글자를 입력하면 자동완성 기능작동.
• 드롭다운 (Dropdown) : 구매 페이지에서 옵션선택 클릭시 다양한 옵션이 나옴
• 아코디언 (Accordion) : 모바일 화면에서 검색창 클릭시 실시간 검색 급상승 순위가 나옴.
• 캐러셀 (Carousel) : 배너가 양쪽으로 넘어감
• 무한스크롤 (Infinite Scroll, Continuous Scroll) : 실시간 구매를 눌러 페이지이동후 무한스크롤 적용
• GNB (Global Navigation Bar), LNB (Local Navigation Bar) : 상단의 카테고리에 마우스를 올렸을 때 드롭다운 형식으로 내려오는 서브 메뉴(LNB)가 나옴

2. 컬럼 그리드 시스템 사용 여부

• 브라우저의 크기를 사용자의 마음대로 바꿨을때, 컬럼그리드 시스템으로 브라우저 비율에 맞게 렌더링됨.

UX 분석

피터 모빌의 UX 7요소 충족 여부

1. 유용성(Useful) : 사용 가능한가? 충족 (10 / 10)

• 판매자와 소비자를 연결해주는 목적인 플랫폼이라 목적에 부합함.

2. 사용성(Usable) : 사용하기 쉬운가? 충족 (10 / 10)

• 조작난이도가 쉽고, 자주쓰이는 UI 디자인 패턴이 많아 친숙함을 줌.

3. 매력성(Desirable) : 매력적인가? 충족 (10 / 10)

• 시기에 맞는 항목들을 잘 노출 시켜서 사용자들의 감성을 자극하며, 다양한 제품 노출로 사용자들의 구매욕을 부추김.

4. 신뢰성(Credible) : 신뢰할 수 있는가? 충족 (10 / 10)

• 소비자들의 리뷰시스템이 있기 때문에 신뢰성에 충족함

5. 접근성(Accessible) : 접근하기 쉬운가? (5 / 10)

• 시력이 좋지 않은 고연령자 사용자들을 위한 글자 키우기, 돋보기 기능 등의 기능이나 시각 장애인을 위한 음성 안내 기능이 없음.

6. 검색 가능성(Findable) : 찾기 쉬운가? (10 / 10)

• 사용자가 원하는 제품이나 정보를 쉽게 찾을 수 있게 직관적으로 표현함.

7. 가치성(Valuable) : 가치를 제공하는가? (9.2(총합평균) / 10)

• 서비스 목적에 맞는 가치를 잘 제공하고 있음.

User flow 그려보기

사용성 평가

제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부

• 시스템 상태의 가시성 (Visibility of system status) O
  • 구매하고자 하는 항목들을 선택하여 장바구니를 통해 진행상황을 알 수 있음.
• 시스템과 현실 세계의 일치 (Match between system and the real world) O
  • 사용자들이 친숙하게 느낄 만한 단어들로 이루어짐.
• 사용자 제어 및 자유 (User control and freedom) X
  • 삭제 직후에 취소할 수 있는 버튼이 잠시 나타나는 기능 등이 없음.
• 일관성 및 표준 (Consistency and standards) O
  • 외부 일관성 :사용자에게 익숙한 UI 디자인 패턴을 사용.
  • 내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있음.(버튼의 모양, 위치, 아이콘 크기 등)
• 오류 방지 (Error prevention) X
• 기억보다는 직관 (Recognition rather than recall) X
  • 최근 검색 했던 단어 목록을 확인할 수 없음
• 사용의 유연성과 효율성 (Flexibility and efficiency of use) O
  • 검색기능에 필터조건을 통해 소비자가 원하는 제품의 서비스를 맞춰 제공함
• 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design) O
  • 콘텐츠와 기능의 우선순위를 정하고 우선 순위가 높은 것을 최소한으로 제공함.
• 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors) O
  • 회원가입이나 앱설치창에서 오류를 인식해줌.
• 도움말 및 설명 문서 (Help and documentation) O
  • 실시간 급상승 또는 인기검색어 등의 간단한 안내를 통해 검색에 도움을 줌.