이것이 UX/UI 디자인이다 / 조성봉

• 네비게이션 설계 시 지켜야 할 원칙
  • 내비게이션에는 탐색뿐만 아니라 현재 위치 확인, 이전으로 돌아가기, 처음으로 돌아가기에 대한 고려가 반영돼야 한다.
  • pc에서는 웹 브라우저의 주소, 뒤로가기 등의 내비게이션 기능을, 모바일에서는 back키, 기능키, 웹과 앱의 상호 이동 등도 고려해야 한다.
  • 현재 정보와 관련된 다른 정보를 요약하거나 하이퍼링크로 노출하면 계층적 메뉴 구조가 갖는 일방향적인 한계를 보완할 수 있다.
  • 하위 메뉴가 적을 경우에는 전체 메뉴를 한 번에 보여줘도 되지만, 하위 메뉴가 많을 경우에는 한 번에 하나씩만 열리게 한다.
  • 화면과 상관없이 일관된 내비게이션과 홈으로 돌아갈 수 있는 링크를 제공한다.
• 검색 설계
  • 검색 옵션은 특정 정보 범위만 좁혀서 검색하고자 할 경우에 효과적이다. 키워드를 여러 개 결합할 경우에도 검색 결과 범위를 좁힐 수 있지만, 서비스가 제공하는 검색 옵션들을 선택하면 더 효과적일 수 있다.
  • 검색 결과 화면의 구성요소
    • 검색 결과 : 검색 결과는 검색어와의 연관도 순으로 단순 나열하는 것보다는 카테고리 구분이나 추천 검색 결과 형태로 제공되는 것이 바람직하다.
    • 연관 검색어 : 검색어와 의미가 연관된 다른 검색어를 보여주면 사용자는 재검색이나 추가적인 탐색을 쉽게 할 수 있다.
    • 검색 옵션 : 검색 결과가 너무 많을 경우에 사용자의 관심사에 따라서 그 범위를 좁힐 수 있는 기능을 제공하는 것이 좋다.
    • 카테고리 구분 : 서비스 구조나 정보의 속성에 따라서 검색 결과를 카테고리로 구분하면 원하는 결과에 좀 더 빠르게 접근할 수 있다.
    • 추천 검색 결과 : 검색 결과 중 가장 신뢰도가 높고 사용자가 반드시 알아야 할 정보
• 필터/태그 설계
  • 필터나 태그는 특정 정보 범위 또는 특정 정보 하나에 바로 접근할 수 잇게 돕는 중요한 경험 요소
  • 필터는 사용자들이 원하는 조건 직접 선택
  • 태그는 정보와 관련된 키워드를 단순히 선택만 하면 바로 이용할 수 있음
  • 필터 이후 맥락 고려
    • 특정 결과만 찾고자 할 때 : 다른 것들은 숨기고, 필터링된 아이템만 보여주기
    • 리스트 중에서 원하는 조건에 해당하는 것만 보고자 할 때 : 전체 리스트 중 필터링된 아이템을 좌상단에
    • 전체 리스트를 유지한 채 선택한 것만 확인하게 할 때 : 전체 리스트 중에서 필터링된 아이템만 하이라이트
  • 필터와 검색이 결합된 디자인
  • 필터와 태그가 결합된 디자인
• 레이블링 설계
  • 서비스의 메뉴명, 정보명, 검색 조건명, 필터명, 태그명 등을 설계하는 작업
  • 이미 실체가 있는 정보에 이름만 붙이는 작업이나, 사용자 관점에서 봤을 때 정보의 레이블은 서비스를 구성하는 정보이자 기능이자 구조.
  • 레이블링 원칙
    • 모든 레이블은 정보를 대표해야 한다. 레이블만 봐도 정보가 연상되어야 한다.
    • 사용자 입장에서 레이블을 정한다.
      • 운영자들이 사용하는 전문용어를 피한다.
      • 사용자들이 잘 모르는 기술적인 용어를 피한다.
      • 함축적인 뜻을 지닌 용어나 유행어를 피한다.
      • 생략된 용어를 피한다.
    • 사용자가 해야 할 행동을 제시하는 서술적인 레이블이 좋다.
    • 한 서비스에서 중복되는 레이블은 피한다.
    • 일관된 레이블의 원칙
      • 하위 정보로 들어갈수록 보다 세밀화된 레이블을 적용하라
      • 같은 네비게이션에 배치된 레이블은 문법적으로도 동일하게 하는 것이 좋다
      • 레이블의 일관된 폰트, 크기, 스타일은 단일하게 구성됐다는 인상을 준다
      • 특정 정보에 대한 레이블은 사이트 어느 곳에서든지 동일한 이름을 가져야 한다.
      • 레이블 길이에 주의하라. 너무 길면 좋지 않다.
      • 품사를 통일한다.
      • 되도록 영어, 우리말 사용 등 사용하는 언어도 통일한다
      • 메뉴명 관리를 하나의 시스템으로 생각하고 전체적인 가이드를 미리 수립한 후 설계한다. 예를 들어 단계depth 별로 원칙을 수립해 메뉴명에 대한 가이드라인을 만든다.
  • 유저 플로우 설계
    • 구성 요소 : 목표, 작업, UI + 행동 + 판단